this is my html file:

<section data-ng-controller="myCtrl">
    {{name}}
    <button id="btn1">Button1</button>
</section>

this is my controller:

angular.module('users').controller('myCtrl', ['$scope',
    function($scope) {

        $scope.name="HELLO";

        document.getElementById("btn1").addEventListener("click",function(){
            $scope.name="changed";
        });
}]);

the html file displays HELLO but it does not changes to "changed" on clicking the button. i am new to angular can someone please help me..

this is my html file:

<section data-ng-controller="myCtrl">
    {{name}}
    <button id="btn1">Button1</button>
</section>

this is my controller:

angular.module('users').controller('myCtrl', ['$scope',
    function($scope) {

        $scope.name="HELLO";

        document.getElementById("btn1").addEventListener("click",function(){
            $scope.name="changed";
        });
}]);

the html file displays HELLO but it does not changes to "changed" on clicking the button. i am new to angular can someone please help me..

• javascript
• angularjs

1 Answer 1

It's because regular event listeners don't trigger a $digest cycle within Angular, which is what will update the view. You should be using ngClick and defining a $scope function:

$scope.clickHandler = function() { $scope.name = "changed"; };

And the HTML:

<button ng-click="clickHandler()">Button1</button>