Error while opening a modal in angular

Question

I am trying the example of modal given in http://angular-ui.github.io/bootstrap. When i click the button for an action, my screen gets blur as if some window popped up but I dont see anything out there and the console says this when i open a modal

Failed to load resource: the server responded with the status 404 (Not Found) --- Cannot GET /function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22%7D Uncaught TypeError: undefined is not a function --- angular.min.js

My controller

'use strict'
var LoginCtrl = ['$scope', '$modal', '$log', function($scope, $modal, $log) {
  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
}];

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function($scope, $modalInstance, items){
    $scope.items = items;
    $scope.selected = {
      item: $scope.items[0]
    };

    $scope.ok = function () {
      $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
}];

My template

<div>
        <script type="text/ng-template" id="myModalContent.html">
            <div>
                <h3 class="modal-title">I m a modal</h3>
            </div>
            <div>
                <ul>
                    <li ng-repeat="item in items">
                        <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                </ul>
                Selected: <b>{{ selected.item }}</b>
            </div>
            <div>
                <button ng-click="ok()">OK</button>
                <button ng-click="cancel()">Cancel</button>
            </div>
        </script>

        <button ng-click="open()">Open me!</button>
        <button ng-click="open('lg')">Large modal</button>
        <button ng-click="open('sm')">Small modal</button>
        <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    </div>

Why I am seeing this strange error. I am loading ui-bootstrap-tpls.min.js of version 0.11.2 and angular.min.js of version 1.3.1. I referred the same kind of issue here and as said by one of them I have the updated versions too. Any suggestions would be a great help thanks.

Answer 1

Ok, this looks like some loading order / mixing different version or dependency - issue(s).
However, as it turned out it is the version of angular (1.1.3) that don't play nice with this version of bootstrap.
So first, Here is a working version of your code (the main part), with angular 1.2.25.
I've also included on the index.html, version 1.1.3 of angular (currently marked out). If you replace the two version, the error reproduces:

<!-- <script src="https://code.angularjs.org/1.1.3/angular.min.js"></script> -->

Regardless specific errors, I strongly recommend upgrading angular to version 1.3 (or 1.2.25 incase IE8 support is a must). It is by far faster, includes much more cool features and leverages many EMCA5 and HTML5 / CSS3 Capabilities.
Can't upgrade? Well it is debugging time... No you know what is wrong, "just" have to find why.
Good Luck!