Scope issue in AngularJS using AngularUI Bootstrap Modal

Looks like a scope issue. I got it to work like this:

var ModalInstanceCtrl = function ($scope, $modalInstance) {    $scope.input = {};    $scope.ok = function () {        alert($scope.input.abc);    };    $scope.cancel = function () {        $modalInstance.dismiss('cancel');    };};

HTML:

<textarea ng-model="input.abc"></textarea>

Update Nov 2014: the issue is fixed with angular-ui-bootstrap 0.12.0 - the transclusion scope is merged with the controller's scope. There is no need to do anything. Just stay with:

<textarea ng-model="text"></textarea>

Before 0.12.0:

Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope.

You should use inheritance and initialize empty text entry in parent $scopeor you can explicitly attach the input to parent scope:

<textarea ng-model="$parent.text"></textarea>

Let'me try to explain the reason. ui-bootstrap modal sourcecode:

.directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) {return {  restrict: 'EA',  scope: {    index: '@',    animate: '='  },  replace: true,  transclude: true,  templateUrl: function(tElement, tAttrs) {    return tAttrs.templateUrl || 'template/modal/window.html';  },

and the template sourcecode - window.html:

<div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)"><div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>

there is a directive modal-transclude，your dialog content will insert into it, it's sourcecode:

.directive('modalTransclude', function () {return {  link: function($scope, $element, $attrs, controller, $transclude) {    $transclude($scope.$parent, function(clone) {      $element.empty();      $element.append(clone);    });  }};

})

now take a look at offical doc of $compile:

Transclusion FunctionsWhen a directive requests transclusion, the compiler extracts its contents and provides a transclusion function to the directive's link function and controller. This transclusion function is a special linking function that will return the compiled contents linked to a **new transclusion scope.**

transclude will create a new scope of controller scope