Cross origin requests are only supported

In your link tag you have href="javascript:void(0);" which is throwing the error. If you remove that, the error is gone.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<div id="modal_open" class="modal fade" role="document">
    <div class="modal-dialog custom-modal-size">
        <div class="modal-content">
            text
        </div>
    </div>
</div>

<a data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

You can set href to # and onclick to event.preventDefault() or return false to achieve same thing like this

<a href="#" onclick="return false;" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

OR

<a href="#" onclick="event.preventDefault()" data-toggle="modal" data-target="#modal_open" ng-controller="ModalDemoCtrl">link</a>

Do you use Chrome and opened the html-script from your filesystem?

Firefox or a webserver shoud fix this cross origin Problem.


href="javascript:void(0);"

is causing it