AngularJS: Is it possible to access the html element called function in the ng-hide directive


I am new to angularjs. Is it possible to access the html element that called a function in the ng-hide directive? I know that ng-click provides the $event which can be used to access the element. However, $event is not available for ng-hide. Furthermore, passing the 'this' keyword as a parameter only passes $scope and even jquery's $(this) keyword is useless.

<h1 class="slide ng-scope" index="0" ng-hide="!isCurrentIndex()">Welcome</h1>

The isCurrentIndex() function is designed to access the index attribute of the element and compare that to a variable that stores the current index. It returns a boolean.

Please any help is appreciated.

                var template = angular.element(t);
                template.attr("class", "slide");

From personal experience forget about accessing data attributes like you did in jQuery. Try to use the angular way of doing things. A good reference for a good start is this git repo: Angular Styleguide by johnpapa

Back to your question. Is this what you try to achieve?


var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.isCurrentIndex = isCurrentIndex;
    $scope.index = 0;
    function isCurrentIndex(index){
       return $scope.index === index;


<div ng-controller="MyCtrl">
    <h1 class="slide" ng-hide="!isCurrentIndex(0)">Welcome</h1>
    <h1 class="slide" ng-hide="!isCurrentIndex(1)">to</h1>
    <h1 class="slide" ng-hide="!isCurrentIndex(2)">ng-hide</h1>