Angularjs show hide css issue

In Angular, this is the wrong approach. You shouldn't actually show or hide elements inside the controller. That's applying a jQuery style (working directly on the DOM) to Angular.

In Angular, you'd use something like ng-if, ng-show or ng-class, all of which can link back to a property on the scope object that is accessible via the controller.

Here are some examples:

<div ng-if="myProp === 'ShowMe'">
<div ng-show="myProp === 'ShowMe'">
<div ng-class="{myCssClass: myProp === 'ShowMe'">

Inside your controller, you'd have something like this:

function MyCtrl($scope) {
    $scope.myProp = 'ShowMe';
    $scope.addExpandCollapseChildIcon = function(newPropValue) {
        $scope.myProp = newPropValue;
    }
}

Here's some links to documentation on ng-if, ng-show and ng-class:

• https://docs.angularjs.org/api/ng/directive/ngIf
• https://docs.angularjs.org/api/ng/directive/ngShow
• https://docs.angularjs.org/api/ng/directive/ngClass

AngularJS has a bunch of angulary ways of doing things, your question for example might look like this:

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.collapsed = true;
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="ctrl">
    <span ng-bind="collapsed ? '+' : '-'"></span>
  </div>
</div>

It watches a model and changes it's appearance based on that model using the ternary operator within ng-bind.

The way you defined your app and controller was incorrect. There's a bunch of different ways to do this as you can see from the answers.

I took this approach:

<div ng-app='myApp' ng-controller="MyCtrl">
  {{name}}
  <div>
    <div>
      <div>
        <label>
          <div>
            <span ng-show='(collapsed != false)' class="icon-expand">-</span>
            <span ng-show='(collapsed == false)' class="icon-collapse">+</span>
          </div>
          <div ng-click='collapsed = !collapsed'>
            Click me to hide minus icon
          </div>
        </label>
      </div>
    </div>
  </div>
</div>
<script>
 var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope) {
   $scope.name = 'Superhero';
   $scope.collapsed = false;

  }); 
</script>

Create a scoped variable that indicated whether or not it is collapsed . Then change that variable and the ng-shows will react.