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