title: AngularJS and Bootstrap 3: Modal won't open a second time
body: <p>I have a weird problem where on the second attempt to open a modal, and I think it has to do with not being able to close properly. I'm very much an angular n00b, so I'm not really sure I'm doing something obviously wrong. The modal opens the first time, and if I cancel, it will open again (and never error that way). When I submit, it will work the first time, and pass the data along to other functions, however if I try to open the modal a second time, I receive this error:</p>
  <pre><code>TypeError: v2.addCounter is not a function
  at fn (eval at &lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:13567:15), &lt;anonymous&gt;:4:364)
  at callback (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:23934:17)
  at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:16251:28)
  at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:16351:25)
  at HTMLButtonElement.&lt;anonymous&gt; (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:23939:23)
  at HTMLButtonElement.m.event.dispatch (http://code.jquery.com/jquery-1.11.2.min.js:3:8549)
  at HTMLButtonElement.r.handle (http://code.jquery.com/jquery-1.11.2.min.js:3:5252)
  </code></pre>
  <p>I'm using angularJS (1.4.9), bootstrap (tpls-1.1.1) and jquery (jquery-1.3.2).</p>
  <p>Here's a skeleton of my modal.</p>
  <pre><code>&lt;script type=&quot;text/ng-template&quot; id=&quot;addcounter.html&quot;&gt;   
  &lt;ng-form name=&quot;vm.addCounterForm&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
          &lt;h3 class=&quot;modal-title&quot;&gt;Add Counter&lt;/h3&gt;
      &lt;/div&gt;
      &lt;button type=&quot;button&quot; style=&quot;btn&quot; ng-click=&quot;vm.cancel()&quot;&gt;Cancel&lt;/button&gt;
      &lt;span ng-show=&quot;materialDistributor &amp;&amp; materialManufacturer &amp;&amp; materialColourGroup &amp;&amp; materialDescription&quot;&gt;
          &lt;button type=&quot;button&quot; style=&quot;btn&quot; ng-click=&quot;vm.saveCounterModal(A bunch of ng-model stuff being sent)&quot;&gt;Save Counter
          &lt;/button&gt;
      &lt;/span&gt;
  &lt;/ng-form&gt;
  </code></pre>
  
  <p>I'm going to leave my unedited modal stuff in my angular controller file:</p>
  <pre><code>//baby's first modal
      vm.addCounter = function (groupIndex, size) {
          var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'addcounter.html',
            controller: ['$uibModalInstance', 'materials', 'groupIndex', addTableCtrl],
            controllerAs: 'vm',
            size: size,
            resolve: {
              materials: function() {return vm.materials},
              groupIndex: function() {return groupIndex}
              }
          });
  
          modalInstance.result.then(function (counter) {
              //console.log(counter.width, counter.length, counter.shape, counter.material, counter.index);
              vm.saveCounter(counter.width, counter.length, counter.shape, counter.material, counter.index, counter.groupIndex, counter.description);
          }, function () {
          console.log('Modal dismissed at: ' + new Date());
          });
      };
  
      var addTableCtrl = function($uibModalInstance, materials, groupIndex) {
          var vm = this;
          vm.materials = materials;
          vm.groupIndex = groupIndex;
          vm.saveCounterModal = function(width, length, shape, material, index, description) {
              var counter = {
                  width: width,
                  length: length, 
                  shape: shape, 
                  material: material,
                  index: index,
                  groupIndex: groupIndex,
                  description: description
              };
  
              $uibModalInstance.close(counter);
          };
  
          vm.cancel = function() {
              $uibModalInstance.dismiss('cancel');
          };
      }
  </code></pre>
  <p>Am I right in thinking that the close function isn't working properly? As the comments say, this is baby's first modal :(</p>
  <p><strong>SOLUTION</strong></p>
  <p>The &quot;save&quot; button I had a function that was no longer being used. Instead of erroring at the line the function was being called at, the whole modal was showing as the cause of the error. Hope this helps other people having this issue!</p>