title: TypeError: Cannot read property 'open' of undefined modal
body: <p>I am trying to display a modal with the information of a certain item. But when I call the function it reads:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'open' of undefined at Scope.$scope.openModal</p>
  </blockquote>
  
  <p>I was hoping someone could tell me why, here is the relevant code:</p>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div ng-controller="View1Ctrl"&gt;
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;Item Details&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;ul ng-repeat="i in items"&gt;
                  &lt;li&gt;Type: &lt;span ng-bind="i.type"&gt;&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;Description: &lt;span ng-bind="i.description"&gt;&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;Date: &lt;span ng-bind="i.createDate"&gt;&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;Priority: &lt;span ng-bind="i.priority"&gt;&lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;Finished: &lt;span ng-bind="i.isDone"&gt;&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" ng-click="$close()"&gt;OK&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>App.Js</strong></p>
  
  <pre><code>'use strict';
  
  // Declare app level module which depends on views, and components
  angular.module('myApp', [
    //'ngRoute',
    'ui.router',
    'ui.bootstrap',
    'myApp.view1',
    'myApp.view2',
    'myApp.version',
    'myApp.items'
  ])
  .config(function($stateProvider, $urlRouterProvider) {
  
      $urlRouterProvider.otherwise('/view1');
  
      $stateProvider  
      .state('view1', {
          url: '/view1',
          templateUrl: 'view1/view1.html',
          controller: 'View1Ctrl'
      })
      .state('view2', {
          url: '/view2',
          templateUrl: 'view2/view2.html',
          controller: 'View2Ctrl'
      });       
  });
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('myApp.view1', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/view1', {
          templateUrl: 'view1/view1.html',
          controller: 'View1Ctrl'
      });
  }])
  .controller('View1Ctrl', ['$scope','itemsService',function($scope,itemsService, $uiModal) {
  
      $scope.$on('itemSwitch.moreInfo', function(event, obj){
          $scope.openModal(obj);
      });
  
      $scope.openModal = function (obj) {
  
          var modalInstance = $uiModal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'templates/modalTemplate.html',
              controller: 'View1Ctrl',
              resolve: {
                  items: function () {
                      return obj;
                  }
              }
          });
      }
  }]); //END
  </code></pre>
  
  <p>Can anyone point me in the right direction to fix this issue?</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>The error is gone, but now it doesn't show anything but the grey-out screen, the console shows the modal html is loading but not displaying properly.</p>
  
  <p><a href="https://i.stack.imgur.com/jjJQ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jjJQ8.png" alt="enter image description here"></a></p>