javascript - angularJS, UI is not updating -

here simple example : http://codepen.io/anon/pen/zqqxaj

in example, like, if "cancel" button clicked, 2 button @ bottom hide.

the problem that, ui (ng-show) doesn't update, after inputfocused set false.

<div ng-controller="mycontroller">     <md-input-container>       <label> new comment </label>       <textarea ng-model="newcommentcontent" ng-focus="isinputfocused = true"> </textarea>     </md-input-container>     <div ng-show="isinputfocused">       <md-button class="md-raised md-primary">post</md-button>       <md-button class="md-raised" ng-click="cancelnewcomment()">cancel</md-button>     </div> </div> 

and js

angular.module('blankapp', ['ngmaterial'])   .controller('mycontroller', function($scope) {     $scope.newcommentcontent = '';     $scope.isinputfocused = false;      $scope.cancelnewcomment = function() {       $('input').blur(); // sure input not focused       isinputfocused = false;     };   }); 

thank you

short answer: suggest use controlleras syntax. here solution.

angular.module('blankapp', ['ngmaterial'])   .controller('mycontroller', function() {     this.newcommentcontent = '';      this.cancelnewcomment = function() {        this.newcommentcontent = '';    }; }); 

long answer: when use old $scope syntax never know scope using right now. material design directives , other directives can create scopes , loose data link.