How to use UI bootstrap dropdown with Angular JS and inside ng-repeat with dynamic data

Question

In my case, I want to render the bootstrap dropdown menu inside an ng-repeat and also it has to bind to data from API. My code is,

<ul class="nav nav-tabs list clearfix" id="myTab">
    <li class="item">
        <a href="#">Home & Garden</a>
    </li>
    <li ng-repeat="category in categories" class="item dropdown">
        <a href="#" class="dropdown-toggle"
            data-toggle="dropdown"
            id="dropdownMenu{{$index}}"
            aria-haspopup="true"
            aria-expanded="true">
                {{$index}}<span class="caret"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu{{$index}}">
            <li ng-repeat="a in category.subcategories">
                <a href="#">{{a.name}}</a>
            </li>
        </ul>
    </li>
</ul>

My controller code to get data from API call is,

$scope.getCategories = function () {
        userService.getCategories($rootScope.UrlProvider.categoriesList).then(function (response) {
            if (response.data.success === true) {
                $scope.categories = response.data.categories;
            }
            else {
                $rootScope.showFailureMsg($rootScope.resourcesData.GenericErrorMessage);
            }
        });
    }

This getCategories() will be called on ng-init.

In this when the parent array "$scope.categories" is static ($scope.categories=[1,2,3,4,5]), the dropdown toggle is working. But when its value is from API $http call success callback, the dropdown toggle is not working. Can you please help me to resolve this?

Thanks