Scope issues in angular modal popup

Question

I have a modal popup on my page. The modal popup use bootstrap angular library.

Inside the body of the modal I have a text box with ng-model attribute, and on the press

Answer 1

You have a number of issues. Firstly, you didn't define the scope property on the modal. By default, the scope is set as child of the $rootScope.

 var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      scope: $scope,
      resolve: {
      }
    });

Secondly, you should set the ng-model to be the property of an object, otherwise angular will automatically create the property for you on the child scope.

Controller

var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.model = {};
   ...
}

Markup

<div class="modal-body">
    <input type="text" ng-model="model.ProjectName" />
</div>

See this plunkr for working sample: http://plnkr.co/tbVHl27D2pXia19kOjob