modal service in angularJS

Question

Below is my controller

angular.module('repoApp')
  .controller('loginCtrl', function ($scope,$modal,$state) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $modal.open({     
      templateURL: 'views/modals/test.html',      
    });  
  });

Below is my template :

<div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>

The error is I got:

Error: One of template or templateUrl options is required.
    at Object.$modalProvider.$get.$modal.open (http://localhost:9000/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:2353:21)
    at new <anonymous> (http://localhost:9000/scripts/controllers/login/loginCtrl.js:18:12)
    at invoke (http://localhost:9000/bower_components/angular/angular.js:4203:17)
    at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4211:27)
    at http://localhost:9000/bower_components/angular/angular.js:8501:28
    at link (http://localhost:9000/bower_components/angular-route/angular-route.js:975:26)
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7768:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7117:13)
    at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6996:30) <div ng-view="" class="ng-scope">

This code is not opening the template but when I use 'template'option and insert the template mark up there, it shows up. This templateURL is not getting triggered. I have configured my gruntfile but I am not sure whether I have to make any changes there also. Is there any lib need to be included in index.html ?

Answer 1

You indeed didn't provide any template for the modal, because it should be templateUrl, not templateURL.

This should work:

$modal.open({     
  templateUrl: 'views/modals/test.html',      
});