Materialize collapse is not working properly when trying to display json data

Question

Here is the code for collapsing and I am using materialize css.

<ul id="ulcollapse" class="collapsible">
                        <li id="licollapse" ng-repeat="single in packageNames">
                            <div class="collapsible-header">{{single.name}}</div>
                            <div class="collapsible-body"><p>{{single.name}}</p></div>
                        </li>
                    </ul> 

And here I am writing my angular js code for retrieving the data from json and trying to display the above html code.

$scope.packageNames = [];
$http.get('data.json').then(function(res){
    $scope.packagesData = res.data; 

    angular.forEach($scope.packagesData.Packages,function(value, key) {
            $scope.packageNames.push({name:value.Name,content:value.Content});
        });
});

I am able to display the data in the html code. But it is not getting collapsed. I am able to retrieve the json data perfectly and there is not syntax wrong in the html code. I double checked it. Please give me some ideas to solve the problem.

Answer 1

After you have done 'pushing' you need to initialize your collapsible with: $('.collapsible').collapsible();

It is enough to place this line in a script at the end of website. It must be done after angular done pushes.