You may be a little confused about how AngularJS works, and this is absolutely normal, especially if you are playing with jQuery to manipulate the DOM.
AngularJS has no function out of the box to launch a modal window, and I see that you are using Bootstrap for this.
I would like to look again at the official AngularJS documentation ( http://docs.angularjs.org/ ) and check out the first examples on the main page to get my head around it. Also be sure to visit Egghead.io ( http://egghead.io/ ) - really good videos.
But in order to give you some help, I have put together an example of using Bootstrap and AngularJS to launch a modal window of your choice.
You can see how it works here ( http://plnkr.co/edit/fCaNjLwi4RlCw66yKRd7 )
Basically, $routeprovider "points" your application to the correct view and controller to be used for a specific route. Thus, everything you want to load (in this case a modal window) should be part of the view.
Take a look at the code below:
<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>ItemDetailsCtrl</title> <link data-require=" bootstrap@3.0.0 " data-semver="3.0.0" rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" /> <script data-require=" jquery@2.0.3 " data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script data-require=" bootstrap@3.0.0 " data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script> 'use strict'; var myApp = angular.module('myApp', []).config(function($routeProvider){ $routeProvider.when('/', { templateUrl: 'views/template.html', controller: 'ItemDetailsCtrl' }); }); myApp.controller('ItemDetailsCtrl', function(){ }); </script> <script type="text/ng-template" id="views/template.html"> <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> </script> </head> <body ng-controller="ItemDetailsCtrl"> <div ng-view></div> </body> </html>
Hope this helps!