javascript - Angular Bootstrap-UI modal throw error -

javascript - Angular Bootstrap-UI modal throw error -

my code this

<div id="palletapp" class="content" ng-app='myapp' ng-controller="mainctrl" style="display: none"> <script type="text/ng-template" id="mymodalcontent.html"> <div class="modal-header"> <h3 class="modal-title">i'm modal!</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{ item }}</a> </li> </ul> selected: <b>{{ selected.item }}</b> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">ok</button> <button class="btn btn-warning" ng-click="cancel()">cancel</button> </div> </script> <button class="btn btn-default" ng-click="open()">open me!</button> </div> angular.module('myapp', ['angular-loading-bar', 'ui.bootstrap']).controller('mainctrl', [ '$http', '$scope', '$modal', '$filter', function ($http, $scope, $filter, $modal) { $scope.open = function(size) { var modalinstance = $modal.open({ templateurl: 'mymodalcontent.html', controller: 'modalinstancectrl', size: size, resolve: { items: function() { homecoming $scope.items; } } }); } } ]);

everything looks okay me. on button click throws error.

typeerror: undefined not function. @ line var modalinstance = $modal.open({

i have correctly added bootstrap-ui reference , page. can 1 point out doing wrong?

you injecting dependencies in wrong order:

'$http', '$scope', '$modal', '$filter', function ($http, $scope, $filter, $modal) {

note $modal service third 1 in list.

javascript angularjs