AngularJS Weird Behavior, NG-INCLUDE Causes Whole Page to Re-Load

Question

A simple ng-include causes the page to recursively print out the whole site over and over in an area of the page, this causes the browser to crash. If I change the path the same thing happens so apparently it's not even looking at the path. If i use ng-include anywhere on the page the same weird behavior will happen.

The template (list.html) is in a sub-folder to where the angularjs scripts are.

HTML

<div ng-if="comments_data">

    <div ng-include="'templates/list.html'"></div>
</div>

Template

<li ng-repeat="comment in comments_data">
    {{ print_some_stuff }}
</li>

Answer 1

Can you please try:

<div ng-if="comments_data">
    <div ng-include="'/templates/list.html'"></div>
</div>

The slash at the beginning of the path was the issue for me. Check your router and see how templates are loaded (should be the same way with a leading slash).

Answer 2

Can you check if this will be useful.

<div ng-include="'templates/list.html'" ng-controller="CommentsController" ng-show="isCommentAvailable()"></div>

.controller('CommentsController', function() {
    $scope.comments_data;

    $scope.isCommentAvailable = function() {
        if ($scope.comments_data)
            return true;
        else
            return false;
    }
}