title: TypeError: providedScope.$new is not a function - angular bootstrap modal
body: <p>I have been following the official guides <a href="https://angular-ui.github.io/bootstrap/#/modal" rel="nofollow noreferrer">here</a> but am still getting the error. A user on <a href="https://github.com/angular-ui/bootstrap/issues/5962" rel="nofollow noreferrer">GitHub</a> experienced the same issue but did not mention how it was resolved, only that there was an error in his code calling his factory and I wasn't able to figure out anything from his <a href="https://plnkr.co/edit/ona2O9zdhdI7zyL18bX2?p=info" rel="nofollow noreferrer">plnkr</a>.</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>function ActivitiesController($scope, $state, $window, Authentication, activity, $uibModal, $uibModalInstance) {
      var vm = this;
  
      vm.authentication = Authentication;
      vm.activity = activity;
      vm.openModal = openModal;
      vm.okOnModal = okOnModal;
      vm.cancelOnModal = cancelOnModal;
  
      function openModal() {
          $uibModal.open({
              template: "&lt;div class='modal-header'&gt;"
                          + "&lt;h3 class='modal-title' id='modal-title'&gt;Friends&lt;/h3&gt;"
                      + "&lt;/div&gt;"
                      + "&lt;div class='modal-body list-group' id='modal-body'&gt;"
                          + "&lt;a ng-repeat='friend in vm.friends' class='list-group-item'&gt;"
                              + "&lt;img class='friend-user-profile-picture' ng-src='{{ friend.friend.profileImageURL }}' alt='{{ friend.friend.displayName }}'&gt;"
                              + "&lt;h4 class='list-group-item-heading' ng-bind='friend.friend.displayName'&gt;&lt;/h4&gt;"
                              + "&lt;small class='list-group-item-text' ng-bind='friend.friend.username'&gt;&lt;/small&gt;"
                              + "&lt;p class='list-group-item-text' ng-bind='friend.friend.email'&gt;&lt;/p&gt;"
                              + "&lt;input type='checkbox'&gt;"
                          + "&lt;/a&gt;"
                      + "&lt;/div&gt;"
                      + "&lt;div class='modal-footer'&gt;"
                          + "&lt;button class='btn btn-primary' type='button' ng-click='vm.okOnModal()'&gt;OK&lt;/button&gt;"
                          + "&lt;button class='btn btn-warning' type='button' ng-click='vm.cancelOnModal()'&gt;Cancel&lt;/button&gt;"
                      + "&lt;/div&gt;",
              size: 'lg',
              scope: vm
          });
      }
  
      function okOnModal() {
          $uibModalInstance.close();
      }
  
      function cancelOnModal() {
          $uibModalInstance.dismiss('cancel');
      }
  }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>&lt;button class="btn btn-primary btn-lg" ng-click="vm.openModal()"&gt;Share with...&lt;/button&gt;
  </code></pre>
  
  <p>The error is in <code>ui.bootstrap-tpls</code> here:</p>
  
  <pre><code>var modalScope = providedScope.$new();
  </code></pre>
  
  <p><strong>Dependencies:</strong></p>
  
  <ul>
  <li>Angular: <code>1.4.8</code> <em>(upgraded from <code>0.3</code>)</em></li>
  <li>Angular-bootstrap: <code>2.4.0</code> <em>(upgraded from <code>0.13.4</code>)</em></li>
  <li>Bootstrap: <code>3.3.7</code></li>
  <li>MEAN.JS: <code>0.4.2</code></li>
  </ul>
  
  <p>Reading on MEAN.JS docs, <code>0.4.2</code> uses angular-ui <code>0.13.4</code> which does not support <code>$uibModal</code>. Because of not supporting it, that's why I upgraded to <code>2.4.0</code>. There is no mention of MEAN.JS <code>0.4.2</code> not supporting angular-ui <code>2.4.0</code> but could that be the potential reason?
  <br>
  <br>
  <br>
  <strong>EDIT:</strong></p>
  
  <p>I've ruled out that it's down to the dependency versions as I have changed back to the default ones that come with '0.4.2' in the MEAN.JS stack <em>(so using <code>$modal</code> instead of <code>$uibModal</code>)</em> and I get a similar error of:</p>
  
  <blockquote>
    <p>TypeError: (modalOptions.scope || $rootScope).$new is not a function</p>
  </blockquote>