I am working with AngularJs, Bootstrap 3. I want to toggle my glyphicon icon on my page. But i am able to do it. I followed the response at the stackoverflow question here. I don't understand why i cannot display glyphicon with the toggle expression.
Here is my code :
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.toggleIcon = false;
$scope.sort = function (sortBy) {
$scope.toggleIcon = !$scope.toggleIcon;
// sorting logic
};
} );
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
<div class="row">
Here the name to sort
<a href="" ng-click="sort('name')">Name </a><span class="glyphicon" ng-class="{glyphicon-sort-by-alphabet': toggleIcon, 'glyphicon-sort-by-alphabet-alt': !toggleIcon}"></span>
</div>
<div class="row">
Here the icon
<a href=""><span class="glyphicon glyphicon-sort-by-alphabet"></span></a>
</div>
</div>
</body>
</html>
You can see the code on Plunker
Thank you.
