Toggle content using ng-click

Question

I have the following query which loops through an array of strings wikiContent. Once I show the first three values (sentences) from the array, I want to add a link that says More and when you click on it it shows the rest of the sentences.

Here is what I have (this is inside an AJAX request using $http):

var opt = "<span>";
for(var j = 0; j < wikiContent.length; j++){
    opt += wikiContent[j];
    if(j === 2){
        opt += "</span><span ng-hide='!show'>";
    }
}
opt += " ... <a href=\"\" ng-click='show=!show'>More</a>";
opt += "</span>";

$rootScope.text = opt;

When I click on More, it does 2 things:

• It reloads the page.
• It doesn't toggle the text

What can I do to fix both of these issues?

Here is the HTML:

<div class="panel-body" ng-bind-html="toHtml(text)"></div>

Here is the toHtml() function:

$scope.toHtml = function(string){
    return $sce.trustAsHtml(string);
};

Answer 1

After reading the documents, Angular mentioned that it is a bad idea to work with the dom from your controllers:

Note: This error often means that you are accessing DOM from your controllers, which is usually a sign of poor coding style that violates separation of concerns.

So, what I did was create an includes directory and putting included stuff in there and now I am using ng-include instead of building the dom items in the controller.