title: controllerAs not binding in ui-bootstrap modal
body: <p>I am refactoring out my controller to controllerAs for my modal. For some reason I cannot get the modal to work with controllerAs in the same manner that it is working with <b> $scope </b></p>
  
  <p>It seems as simple as setting 
  1. I name this in the controller
  2. calling controllerAs in the return object
  3.  bindToController: true
  4.  change ng-click to = <b> ng-click="vm.ok()" </b></p>
  
  <p>But it is not working</p>
  
  <p>Here is the original with $scope.  This directive works just fine.</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('app.components.modal')
          .directive('myModal', myModal);
  
  
  
          function myModal() {
              return {
                  restrict: 'E',
                  scope: {},
                  template: "&lt;button class='btn btn-danger' ng-click='vm.open()'&gt;Beer &lt;/button&gt;",
                  controller: ModalController,
                  controllerAs: 'vm',
                  bindToController: true
              }
          }
  
          function ModalController($modal, $log , $scope) {
              var vm = this;
              $scope.animationsEnabled = true;
  
              vm.open = open;
  
              function open() {
                  var modalInstance = $modal.open({
                      animation: $scope.animationsEnabled,
                      templateUrl: 'app/components/modal/modal.html',
                      controller: ModalInstanceCtrl,
                      controllerAs: vm,
                      bindToController: true,
                      size: 'lg'
                      // resolve: {
                      //  title: function() {
                      //      return 'training Info';
                      //  }
                      // }            
                  });
                  modalInstance.result.then(function(selectedItem) {
                      console.log("Confirmed: "+ selectedItem);
                      $scope.selectedItem = selectedItem;
                  }, function() {
                      $log.info('modal dismissed at: ' + new Date());
                  });
              };
          }
  
          function ModalInstanceCtrl($scope, $modalInstance) {
              var vm = this;
              $scope.ok = function () {
                  // console.log('beer', $scope.beer);
                  // console.log('IBU',$scope.IBU);
  
                  console.log('clicked');
                 // $modalInstance.close($scope.selected.item);
                 $modalInstance.close();
              };
  
              $scope.cancel = function () {
                  console.log('clicked');
                  $modalInstance.dismiss('cancel');
              };
          }
  
  
  
      })(); // end of iffe statement function
  </code></pre>
  
  <p>My modal html file represents $scope.  This is fine as well</p>
  
  <pre><code> &lt;div class="modal-header" &gt;
    &lt;button type="button" class="close" ng-click="$hide()"&gt;&amp;times;&lt;/button&gt;
    &lt;h4 class="modal-title" &gt;&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="modal-body" &gt;
    &lt;form name="beerForm"&gt; 
      &lt;div class="form-group"&gt;
        &lt;label&gt; Beer Name&lt;/label&gt;
        &lt;input type="text" class="form-control" placeholder="beer" ng-model="beer.beerName"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt; IBU&lt;/label&gt;
        &lt;input type="number" class="form-control" placeholder="IBU" ng-model="beer.IBU"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button type="button" class="btn btn-default" ng-modal="beer.Name"ng-click="ok()"&gt;Cancel&lt;/button&gt;
    &lt;button type="button" class="btn btn-danger" ng-modal="beer.IBU" ng-click="cancel()"&gt;Confirm&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I change the $scope to vm for view model  and add vm to the modal buttons like so: <b> vm.ok() vm.cancel() </b> then the buttons longer work.</p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('app.components.modal')
          .directive('myModal', myModal);
  
  
  
          function myModal() {
              return {
                  restrict: 'E',
                  scope: {},
                  template: "&lt;button class='btn btn-danger' ng-click='vm.open()'&gt;Beer &lt;/button&gt;",
                  controller: ModalController,
                  controllerAs: 'vm',
                  bindToController: true
              }
          }
  
          function ModalController($modal, $log , $scope) {
              var vm = this;
              $scope.animationsEnabled = true;
  
              vm.open = open;
  
              function open() {
                  var modalInstance = $modal.open({
                      animation: $scope.animationsEnabled,
                      templateUrl: 'app/components/modal/modal.html',
                      controller: ModalInstanceCtrl,
                      controllerAs: vm,
                      bindToController: true,
                      size: 'lg'
                      // resolve: {
                      //  title: function() {
                      //      return 'training Info';
                      //  }
                      // }            
                  });
                  modalInstance.result.then(function(selectedItem) {
                      console.log("Confirmed: "+ selectedItem);
                      $scope.selectedItem = selectedItem;
                  }, function() {
                      $log.info('modal dismissed at: ' + new Date());
                  });
              };
          }
  
          function ModalInstanceCtrl( $modalInstance) {
              var vm = this;
              vm.ok = function () {
                  // console.log('beer', $scope.beer);
                  // console.log('IBU',$scope.IBU);
  
                  console.log('clicked');
                 // $modalInstance.close($scope.selected.item);
                 $modalInstance.close();
              };
  
              vm.cancel = function () {
                  console.log('clicked');
                  $modalInstance.dismiss('cancel');
              };
          }
  
      })(); // end of iffe statement function
  </code></pre>
  
  <p>There does not seem to be a clear reason that vm.ok() would not work on buttons attached to the modal.  I am not getting an error.  </p>