Angular expression not updated upon button press

Question

I can successfully update an Angular expression immediately but it fails upon a button press. I need a little help here.

Here's the code.

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

    <div ng-app="MyApp">
    <div ng-controller="MyController">

        <button id="myButton">Press</button>
        {{myMessage}}

        <script>

            function setMessage(msg) {
                angular.module('MyApp', [])
                   .controller('MyController', function($scope) {
                       $scope.myMessage = msg;
                });
            }

            setMessage("first");

            $(document).ready(function() {
                $('#myButton').on('click', function( event ){
                    setMessage("second");
                });
            });
        </script>

    </div>
    </div>

</body>
</html>

The first call which happens right away correctly updates the expression to "first". However the second call when the button is pressed fails to upate the expression to "second". What am I doing wrong?

Thanks to everyone who responded with great explanations. It has helped to change my thinking to the Angular way. — r0144, Nov 02 '15 at 15:27

score 0 · Answer 1 · answered Oct 30 '15 at 18:34

Remove the function around your angular module and you should use angular's ng-click directive to update your html on click:

<div ng-app="MyApp">
    <div ng-controller="MyController">

        <button id="myButton" ng-click="update('second')">Press</button>
        {{myMessage}}

        <script>

            angular.module('MyApp', [])
               .controller('MyController', function($scope) {
                   $scope.myMessage = "first";

                   $scope.update = function(msg){
                        $scope.myMessage = msg;
                   }
               });

        </script>

    </div>
</div>

The documentation for ng-click: https://docs.angularjs.org/api/ng/directive/ngClick

score 0 · Accepted Answer · edited May 23 '17 at 11:44

First of all, good advice: remove jQuery from the project until you understand well why you should not use jQuery-style development with Angular app. Shortly, Angular has a specific event/parsing/compiling lifecycle that is not the same as just the flow we are used in jQuery projects. Take a look at this thread.

Then what you need to do is to use ngClick directive:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MyController">
        <button ng-click="setMessage('second')">Press</button>
        {{myMessage}}
  </div>
</div>

<script>
angular.module('MyApp', [])
.controller('MyController', function($scope) {
    $scope.myMessage = 'first';
    $scope.setMessage = function(msg) {
        $scope.myMessage = msg;
    };
});
</script>

score 0 · Answer 3 · edited May 23 '17 at 12:03

Don't mix jQuery with angularjs, unless is totally needed. See this answer about it

you should use all the events, functions and directives providad by angularjs.

So your coude would look to something like this

<div ng-app="MyApp">
    <div ng-controller="MyController">

    <button ng-click="setMessage()">Press</button>
        {{myMessage}}

        <script>
            function setMessage(msg) {
                angular.module('MyApp', [])
                   .controller('MyController', function($scope) {
                       // set the original value for myMessage
                       $scope.myMessage = "first";
                       // update with second value
                       $scope.setMessage = function(){
                            $scope.myMessage = "second";
                       }
                });
            }
        </script>
    </div>
</div>

Of course you should organize this better, but this is the first approach

The main difference is that if you use the angular events (like ng-click in this case) it will let Angular knows what something has changed and that it has to update/refresh the view.

If you change something with jQuery, unless you force angular to know it (using $scope.$apply()) there is no way that angular knows by itself that the model has changed.

Angular expression not updated upon button press

3 Answers3