Q:

Apply in progress in Angular.JS

I have angularjs application and <span> in it. I try to hide it with ng-hide directive, but:
<span ng-hide="hideSpan">

And
// controller code here
....
$scope.hideSpan = true;
....

Doesn't work, it's ignoring. And if i make:
// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....

I get error: $apply already in progress.
How can i correctly use ng-hide/ng-show in this way?
Thank you.

A:

You should be able to directly control the hide/show functions from your controller just as you show. The following is working example using a button to trigger toggling of hide show. 
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="mycontroller">
    <span ng-hide="hideSpan">Some Content to hide</span>
    <button ng-click="toggleHide()"/>Toggle Hide</button>
  </body>

</html>

And the script.
angular.module('myapp', []).controller('mycontroller', function($scope){
  $scope.hideSpan = true;

  $scope.toggleHide = function(){
    if($scope.hideSpan === true){
      $scope.hideSpan = false;
    }
    else{
      $scope.hideSpan = true;
    }
  }

  });

I've created a simple plunker to show this in action at http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.
As far as why the $apply is causing an error, this is to be expected as direct scope (provided by the $scopeProvider) variable operations are already watching for change and wrapped into a default apply of sorts in core angular so any change will be automatically applied to the other bindings of that variable.

