Dynamic Tabs for ng-class

Question

I am trying to change the active state of tabs that are created dynamically. Depending on which value is selected, will determine which view I will see and will change the $location. I this code and cannot get the state of the dynamically created tabs to change. Need some guidence on what I am doing wrong. Thank you Here is my code snippet

HTML

    <ul id="tabBarList">
        <li ng-class="{active: isActive('/list')}" ng-model="all"><a href="#/list"     id="newRequest" >All Requests</a></li>
        <li ng-class="{active: isActive()}" ng-click="getDetails(tabs.name, post.status)" ng-repeat="tabs in tabList"><a href=""  id="idNumber"># {{tabs.name}}</a><a href="" id="exitTab" ng-click="selectTab(tabs.name)" >x</a></li>
    </ul>


        <tr ng-repeat="post in posts">
        <td id="ticketId"><a id="listlink" href="" ng-click="addTab(post.ticketId, post.status)">{{post.ticketId}}</a></td>
        </tr>

Controller

$scope.isActive = function(path) {
            if($location.path() == path){
                return true
            } else {
                return false
            }
};

Function to get location for created tab

$scope.getResults = function(status){

    if( status == "Closed"){
    var path = "/list/closed";
    $location.path(path);

    $scope.getActive($location.path());

    }

    if( status == "Active"){

    }
}

$scope.tabList = [ ]; $scope.addTab = function(ticketId) {

            $scope.tabList.push({'name': ticketId });

        };

Answer 1

Please Check this jsFiddle

And do changes like

<ul id="tabBarList"> <li ng-class="{active: isActive('list')}" ng-model="all"><a href="#/list" id="newRequest" >All Requests</a></li> <li ng-class="{active: isActive(tabs.name)}" ng-click="getDetails(tabs.name, post.status)" ng-repeat="tabs in tabList"><a href="#/{{tabs.name}}" id="idNumber"># {{tabs.name}}</a><a href="" id="exitTab" ng-click="selectTab(tabs.name)" >x</a></li> </ul>

$scope.isActive = function(path) { if($location.path() == '/'+path){ return true; } else { return false; } };