title: How to use Angular-Strap to create a modal with a controller?
body: <p>I'm struggling to find the right way to use an Angular-Strap modal/aside with a controller.</p>
  
  <p>Yes, the calling code could inject the <code>$scope</code>, making it available to the modal. But there are issues with that.</p>
  
  <pre><code>myModal = $modal({
  scope: $scope,
  template: 'template.html',
  show: false,
  backdrop: "static",
  keyboard: false,
  persist: true
  </code></pre>
  
  <p>});</p>
  
  <p>This will pollute the calling controller with potentially modal-only methods and properties. </p>
  
  <p>I usually use "controllerAs", and therefore don't even have a <code>$scope</code> to inject into the modal in the first place!</p>
  
  <p>You could create a new <code>$scope</code> and then insert methods into that, but again, that would require injection of <code>$scope</code> into the parent controller. Bad bad bad.</p>
  
  <p>If I use <code>ng-controller</code> inside the modal template, I can have my controller. But his gives me another problem: now I cannot inject data into the modal controller, and there is no way my calling code can know when the modal is closed and returning data from the modal also becomes a chore (involves a factory just to keep the parent and child controller data synchronized).</p>
  
  <p>I'm really struggling how to make this the best way.</p>
  
  <p>Any ideas?</p>
  
  <p>Cheers</p>
  
  <p><strong>Update</strong>  </p>
  
  <p>This is how I do it for now:</p>
  
  <p>In my template I make a directive that opens up the modal.<br>
  Example:  </p>
  
  <pre><code>&lt;my-modal
          on-update="ctrl.OnDialogUpdate"&gt;
  &lt;/my-modal&gt;
  </code></pre>
  
  <p>So basically the directive calls my modal and when the modal closes or wants to return with a result, it calls the method specified in the directive parameter. </p>
  
  <p>This is how the directive could look:</p>
  
  <pre><code>(function() {
  
  'use strict';
  
  angular.module('app').directive('myModal',myModal);
  
  function myModal(){
  
      return {
  
          restrict: 'E',
  
          // The modal callback specified in the directive tag
          scope: {
              onUpdate: '&amp;?'
          },
  
          replace: true,
  
          // This is the template for the directive, not the modal
          templateUrl: 'button.html',
  
          controllerAs: 'ctrl',
  
          bindToController: true,
  
          compile: function (element, attrs) {
  
              return function (scope, element, attrs) {
  
              };
          },
  
  
          /*@ngInject*/
          controller: function($scope, $log, $aside){
  
              var self = this;
  
              var myDialog = $aside({
  
                  // Dialog template
                  template: 'my-modal.template.html',
                  show: false,
                  animation: 'am-fade-and-slide-right',
                  placement: 'right',
                  backdrop: true,
                  html: true,
                  container: '',
                  scope: $scope
              });
  
  
              // Opens modal
              self.ShowDialog = function(){
                  myDialog.$promise.then(function() {
                      myDialog.show();
                  })
              };
  
  
              // Expose Update() method to the dialog template
              $scope.Update = function(){
  
                  if(angular.isFunction(self.onUpdate) ) {
  
                      self.onUpdate()();
                  }
  
              }
  
          }
      }
  
  }
  
  })();
  </code></pre>