Why $scope variable isn't updated?

Question

I have a problem with a scope variable. When i open the form, the content is displayed correctly in the input field. But when I change them and the ok-function fires the changes are not displayed. instead i get the content of form.name. Why isnt the scope updated by the ng-model of the input field?

app.controller('updateFormCtrl', function( $scope, $modalInstance, APIService, form) {

    $scope.name = form.name;


$scope.ok = function() {

    alert($scope.name)

};

});

View:

<div class="col-sm-10"><input ng-model="name" type="text" class="form-control" placeholder="Categorie"></div>

Edit: Here is the other controller:

$scope.updateForm = function( form ) {

        var modalInstance = $modal.open({

            templateUrl: 'views/modals/updateForm.html',
            controller: 'updateFormCtrl',
            resolve: {

                form: function() { 

                    return form;

                }

            }

        });

        modalInstance.result.then(function() {

            $scope.categories =  APIService.query({ route:'category' });

        });
    };

Edit 2:

 <div class="modal-footer">

        <button type="button" class="btn btn-default" ng-click="cancel()">Abbrechen</button>
        <button type="button" class="btn btn-primary" ng-click="ok()">Speichern</button>

    </div><!-- /.modal-footer -->

Answer 1

It's because your $scope.ok isn't defined inside updateFormCtrl . So basically, your ok() cannot read the changes you have made in textbox.

Try moving $scope.ok inside controller.

app.controller('updateFormCtrl', function( $scope, $modalInstance, APIService, form) {

$scope.name = form.name;
$scope.ok = function() {

alert($scope.name)

};

});

Answer 2

I think this is the solution:

https://egghead.io/lessons/angularjs-the-dot