title: Angular UI Bootstrap Modal Form Scope "undefined"
body: <p>i have a uibootstrap accordion "angular_accordion.html" with a button opening modal "new_project_modal.html", values entered in modal are shown in view "angular_tabel.html" in twitter bootstrap panel with a button to open the same modal "new_project_modal.html", i want to show values in input fields so that the user can edit, but values are not available in scope in controller "modal_new_project.js".</p>
  
  <p>Another thing i dont get is that in "new_project_modal.html", ng-controller="ModalDemoCtrl as modalScope", i have to use ng-model="modalScope.name", ng-model="name" doesnt work, no data binding, no scope in controller, why? when it works like ng-model="something" in other views without the need of "modalScope."?</p>
  
  <p>AngularJS: 1.4.7<br>
  UI Bootstrap: 0.14.3</p>
  
  <h1>angular_accordion.html:</h1>
  
  <pre><code>&lt;div ng-controller="UibAccordionCtrl"&gt;
  
      ......
      .....
  
              &lt;div ng-controller="ModalDemoCtrl"&gt;
  
                  &lt;a href="#" id="project-popover" class="btn btn-default center-block" ng-click="open()"&gt;&lt;i class="fa fa-bar-chart-o pull-left" id="test1"&gt;&lt;/i&gt;Create Project&lt;/a&gt;
  
              &lt;/div&gt;
  
              ............
              .......
  &lt;/div&gt;
  </code></pre>
  
  <h1>angular_tabel.html:</h1>
  
  <pre><code>&lt;div ng-controller="TabsCtrl as tabsController"&gt;
  
      .........
  
              &lt;div class="panel panel-default" id="outer-panel" ng-repeat="panel in panels"&gt;
  
      .............
      ............
      .........
                          &lt;div ng-controller="ModalDemoCtrl"&gt;
                              &lt;button class="btn btn-default" ng-click="editProject(panel.name)"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;/div&gt;
  
      ........
      .......
  
  &lt;/div&gt;
  </code></pre>
  
  <h1>new_project_modal.html:</h1>
  
  <pre><code>&lt;div ng-controller="ModalDemoCtrl as modalScope"&gt;
  
      ...............
      .............
  
                      &lt;form class="form-horizontal"&gt;
                          ...........
                                  &lt;input type="text" class="form-control" id="userName" placeholder="Name" ng-model="modalScope.name"&gt;
                          .......
                      &lt;/form&gt;
  
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" ng-click="ok(modalScope.name)"&gt;Create&lt;/button&gt;
          &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h1>modal_new_project.js:</h1>
  
  <pre><code>var app = angular.module('modalNewProjectModule', ['ui.bootstrap']);
  
  app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
  
      $scope.open = function () {
  
          var modalInstance = $uibModal.open({
              templateUrl: 'partials/new_project_modal.html',
              controller: 'ModalInstanceCtrl',
              scope: $scope,
              windowClass: 'test-modal-width',
              backdrop: false,
              resolve: {
                  projectName: function () {
                      return $scope.name;
                  }
              }
          });
      };
  
      $scope.editProject = function (name) {
          var modalInstance = $uibModal.open({
              templateUrl: 'partials/new_project_modal.html',
              controller: 'EditModalInstanceCtrl',
              scope: $scope,
              windowClass: 'test-modal-width',
              backdrop: false,
              resolve: {
                  projectName: function(){
                      return name;
                  }
              }
          });
      };
  });
  
  app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {
      $scope.ok = function(projectName) {
  
          var new_project_params = {
              'name': projectName,
              'status': 'Status New'
          };
  
          NewProjectService.setValue(new_project_params);
  
          $uibModalInstance.close();
  
      };
  
      $scope.cancel = function () {
          $uibModalInstance.dismiss('cancel');
      };
  });
  
  app.controller('EditModalInstanceCtrl', function ($scope, $uibModalInstance, projectName, NewProjectService) {
  
      $scope.name = projectName;              //undefined
  
      $scope.ok = function(project) {
  
          var new_project_params = {
              'name': projectName,
              'status': 'Status New'
          };
  
          NewProjectService.setValue(new_project_params);
  
          $uibModalInstance.close();
  
      };
  
      $scope.cancel = function () {
          $uibModalInstance.dismiss('cancel');
      };
  });
  </code></pre>