Angular JS two way binding not updating when using button

Question

I'm a bit of a newb at angular and having a persnickety issue. I am trying to update a variable bound to a div in my controller with a function, that is called when a button is clicked. (The function is bound to the button by ng-click.) When I click the button, the displayed value does not change, even though the variable is changed. However if I assign the same updating function to the element itself it does change when I click that element. Can anyone explain? Here's my code:

Javascript

angular.module('Compendium',['ngRoute'])
.config(function($routeProvider){
    $routeProvider.when('/css',{
        templateUrl:'css.html', 
        controller: 'cssCtrl'
    })
}).controller('cssCtrl',function($scope,counterhelper){
    //counterhelper($scope.data)
//counter.increment();

    $scope.increment = function(){
        alert('hey');
      $scope.display = 'Nothing'
    }
     $scope.display = 1;

      // var transform = function(){
      //  

}).factory('counterhelper',function(){
    var addOne = function(val){
        val ++;
    }
    return addOne;
})

and Html

<html ng-app = "Compendium">
<head>
<script src = "node_modules/angular/angular.js"> </script>
<script src = "node_modules/angular-route/angular-route.js"> </script>
<script src = "app.js"></script>
<script type="text/ng-template" id="css.html">
  <h1 ng-controller = 'cssCtrl' ng-click='increment()'>
    {{display}}
    </h1>
    <button ng-click = 'increment()' >Increment</button>
</script>
</head>
<body>
<div ng-view>
</div>
</body>

</html>

Thanks!

I understand that you're a newbee but try to clean up your code before posting it in your question. You have posted a lot of dead code (your commented code and the counterhelper factory) — Lizzy
– Lizzy, Commented Sep 2, 2016 at 7:04

Sajeetharan · Accepted Answer · 2016-09-02 06:17:46Z

3

Problem here is your controller is outside the button hence it does not recognize the controller attached, wrap it inside a div

<div ng-controller = 'cssCtrl'>
  <h1  ng-click='increment()'>
    {{display}}
  </h1>
  <button ng-click = 'increment()' >Increment</button>
</div>

answered Sep 2, 2016 at 6:17

Sajeetharan

223k65 gold badges369 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular JS two way binding not updating when using button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related