title: Angular-ui: Is resolve the only way to pass scope to an angular-ui modal?
body: <p>I have been using angular-ui with angularjs for a while now and have encountered a problem and subsequently a solution, but I want to know if this is a good way to do things.  The original issue was dealing with passing objects in a directive's scope to a modal.  Most of the suggestions I found on SO and such deal with resolve:</p>
  
  <blockquote>
    <p>resolve: members that will be resolved and passed to the controller as
    locals:
    <a href="https://stackoverflow.com/questions/17347127/angularjs-pass-object-data-into-modal">AngularJS - Pass object data into modal</a></p>
  </blockquote>
  
  <p>My issue with the suggestions was that if you need to pass different objects from the scope to the modal for different modals, you will need two controllers per modal. One with the open() method/$modal service and the other for the actual $modalinstance.  This is due to the necessity of resolving different objects in different ways for different modals.  I decided that instead of using multiple resolves, why not use one that is an object that can be defined in the html to hold all of the other objects in the directive's scope that you wish to pass to the modal?  </p>
  
  <p>The code is below - everything should look fairly vanilla until the test.html directive template.</p>
  
  <p>app.js:</p>
  
  <pre><code>var app = angular.module('modalscope', ['ui.bootstrap']);
  
  app.controller('ModalCtrl', function($scope, $modal){
  
      $scope.open = function(modal_scope){
          var modalInstance = $modal.open({
              scope: $scope,
              templateUrl: 'modal-content.html',
              controller: 'ModalInstanceCtrl',
              resolve: {
                  modal_scope: function() {
                          $scope.modal_scope = modal_scope;
                          return $scope.modal_scope;
                  }
              }
          });
      };
  });
  
  app.controller('ModalInstanceCtrl', function($scope, $modalInstance, modal_scope){
      $scope.names = modal_scope.names;
      $scope.selName = modal_scope.selName;
      $scope.ok = function(){
          $modalInstance.close({  });
      };
  });
  
  app.directive("appList", function() {
    return {
      restrict: 'E',
      templateUrl: "test.html",
      'link': function(scope, iElement, iAttrs) {
              scope.names = [ {"name":"john"},{"name":"joe"},{"name":"mary"}];
      }
    };
  });
  </code></pre>
  
  <p>index.hmtl:</p>
  
  <pre><code>&lt;html ng-app="modalscope"&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /&gt;
  &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;app-list&gt;&lt;/app-list&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>test.html:</p>
  
  <pre><code>&lt;div ng-controller="ModalCtrl"&gt;
      &lt;h2 ng-repeat="name in names"&gt;{{name.name}}&lt;button ng-click="open({'names':names,'selName':name });"&gt;Click&lt;/button&gt;&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>modal_content.html:</p>
  
  <pre><code>&lt;h2&gt;modal test&lt;/h2&gt;
  &lt;p&gt;name: {{selName.name}}&lt;/p&gt;
  &lt;button class="btn btn-success" ng-click="ok()"&gt;OK&lt;/button&gt;
  </code></pre>
  
  <p>Basically, is my current implementation going to cause issues?
  Are there better ways to avoid writing multiple controllers per modal/resolving a long list of potential scope objects than resolving a single container object for the modal instance's scope as I did with:</p>
  
  <pre><code>"open({'names':names,'selName':name });"
  </code></pre>