angular ui modal scope/variable issue

Question

Please review this link: http://plnkr.co/edit/sgVUGIl9eOoXik9gBIHD and help me.

I'm passing 'Bond' a name variable to the modal for the text field and changing that to 'James' (or something else) It does change the value in the text box, but in the alert (in $scope.ok of Modal Controller) it is returning the old value 'Bond'

Thanks for your help and time.

Answer 1

You are running in problems regarding the prototypical inheritance of scope properties. Please have a look at: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

You can avoid these problems if you are using an object in your controller:

$scope.obj = {};
$scope.obj.name = name;

in your html you need to write:

<input ng-model="obj.name" >

Now you may access the name in your ok function:

$scope.ok = function () {
    console.log($scope.obj.name)
    $modalInstance.close($scope.selected.item);
};

your working plunkr: http://plnkr.co/edit/PRckScjJQZVdVhXDqjMu?p=preview