AngularJS inject issue with Angular Bootstrap modal

angular-ui-bootstrap, angularjs, javascript

Solution

Ok - the issue was actually with my template. I had modified the partial from the sample to be:

<div ng-controller="ModalInstanceCtrl">
  <div class="modal-header">
    <h3>I am 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>
</div>

While in fact I needed to remove the ng-controller reference.

<div>
  <div class="modal-header">
    <h3>I am 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>
</div>

I still feel like I am stumbling around with Angular but this seemed to do the trick!

Problem

I am integrating the modal from Angular Bootstrap and trying to adapt code sample from here to my app. I get the error: `Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance` What do I need to do to make $modalInstance work? I see from code sample that they have written it so that it is within the scope of the function but I am not sure how to write things when chaining controllers. ``` angular.module('myApp', ['ui.bootstrap']). controller('ModalInstanceCtrl', function($scope, $modalInstance) { }). factory('AuthService', ['$http', '$rootScope', '$modal', function($http, $rootScope, $modal) { return { loginModal: function(callback) { var modalInstance = $modal.open({ templateUrl: '/partials/main/signin', controller: 'ModalInstanceCtrl' }); modalInstance.result.then(function(selectedItem) { $scope.selected = selectedItem; }, function() {}); } }; } ]); ```

Original source