如何在angularjs中使用UI引导程序选项卡的内容动态地激活选项卡？

Question

I want to dynamically active tab with content in angular js my code is

<uib-tabset ng-if="pets_count > 0" class="petsTabs tab-animation">
    <div ng-repeat="(key, pet) in pets_list">
        <uib-tab heading="{{pet.pet_name}}" active="{{pet.pet_id == activePet}}">
            <div class="petsTabsContent" >
                <h4>
                    {{pet.pet_name}}
                    <small>
                        Boarding Dates: {{ pet.start_date | date : 'MMMM d, y'}} to {{ pet.end_date | date : 'MMMM d, y'}}
                    </small>
                </h4>
            </div>
        </uib-tab>
    </div>
</uib-tabset>

i have two variables pet.pet_id, activePet on base for these variables i have to active tab. but it does not working i am new to angular js thanks in advance This controller

$scope.show_pet_function = function () {
    var pet_id;
    var action;
    pet_id = parseInt($('.pet_view_option').attr('data-pet_id'));
    action = $('.pet_view_option').attr('data-action');
    petowner_user_id =  parseInt($('.pet_view_option').attr('data-pet-owner'));
    var details = $scope.hidePetData;
    $http.post(CONFIG.APIURL + 'Pets/changePetHideStatus/', {pet_id: pet_id, action: action})
            .then(function (response) {
                if (response.data.action == 'show_pet') {
                    promise = petlistFunction(petowner_user_id).then(function (response) {
                        $scope.activePet = pet_id;
                        angular.extend($scope.pets_list, response.data['pets_list']);
                    });
                    toastr.success(response.data.message);
                } else if (response.data.action == 'hide_pet') {
                    promise = petlistFunction(petowner_user_id).then(function (response) {
                        $scope.activePet = pet_id;
                        angular.extend($scope.pets_list, response.data['pets_list']);
                    });
                }
            });
}

This is response for pet_list object type array

Answer 1

I think there might be an issue with $scope binding, as you are pulling the data in then-able function. So try by placing $scope.$apply() after the $http response. For reference add it like this

angular.extend($scope.pets_list, response.data['pets_list']);
$scope.$apply();