[SOLVED] How to change value of scope within a function

How to change value of scope within a function - Why is my code not working?

Simple ng-class binding is not triggered when called inside a function, how can I resolve this?

$scope.afterHide = function() {
  $scope.inputState = "fade-in"; 
}

<label ng-class="inputState">Next statement</label>

Solution

Works fine in this example:

angular.module("app",[])

.controller("ctrl", function($scope) {

  $scope.afterHide = function() {
      $scope.inputState = "fade-in"; 
  };
  
  $scope.reset = function() {
      $scope.inputState = "";
  };
});

.fade-in {
    background-color: red;
}

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <label ng-class="inputState">Next statement</label>

  <br><button ng-click="afterHide()">Invoke afterHide</button><br>
  <button ng-click="reset()">Reset</button>
</div>

If it works then I think it has something to do with the overall logic of my code. The function $scope.afterHide is triggered by an event on one of the directives, this directive is defined outside the controller. In html its basically just another div that has a state of change. When a change happens, other elements on the page will also be affected, in this context, that other element is the label tag. When the change happens, the $scope.afterHide function within the controller is called by the directive which is defined outside of the controller.

Scopes are arranged in hierarchical structure which mimic the DOM structure of the application.

The ng-click directive cannot invoke a function on a scope that is outside its hierachy. Also if the ng-click directive is on a template inside a directive that uses isolate scope, the event must be connected to parent scope with expression, "&", binding.

For more infomation, see