Angular Bootstrap-UI modal throw error

My Code is like 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 a 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() {
                        return $scope.items;
                    }
                }
            });
        }
    }
]);

everything looks okay to me. But on button click this throws an error.

TypeError: undefined is not a function. at line 
  var modalInstance = $modal.open({

I have correctly added Bootstrap-UI reference and all to page. Can any one point out what I am doing wrong?