Knowledge article how on Service Portal with More and less button ServiceNow

HTML:

<div>
  <div ng-if="data.categoryExists" class="panel panel-{{::options.color}} b">
    <div class="panel-heading">
      <h4 class="panel-title">{{::data.categoryDisplay}}</h4>
    </div>
     <div class="panel-body">
      <div ng-if="data.items.length == 0">
        (${No articles})
      </div>
      <div ng-repeat="kb_article in data.items track by $index"  class="sp-kb-topic-article m-b-lg" id="button1">
       <div ng-if="(!isMore && $index<=2) || (isMore)">
        <h4>
          <a ng-href="?id=kb_article&sys_id={{::kb_article.sys_id}}">{{::kb_article.title}}</a>
        </h4>
        <div style="max-height: 3em; overflow: hidden; padding-top:4px;">{{::kb_article.inner_text}}</div>
        <div class="kb-about" style="padding-top:4px;">
          <span class="about-outer-span">
            <span class="author pad-right" ng-if="kb_article.author">
              <glyph sn-char="user" class="pad-right" />
              ${Authored by {{::kb_article.author}}}
            </span>
            <span ng-if="kb_article.sys_view_count == 1" class="views pad-right">
              <span class="pad-right">•</span> <glyph sn-char="eye-open" class="pad-right" />
              ${{{::kb_article.sys_view_count}} View}
            </span>
            <span ng-if="kb_article.sys_view_count > 1" class="views pad-right">
              <span class="pad-right">•</span> <glyph sn-char="eye-open" class="pad-right" />
              ${{{::kb_article.sys_view_count}} Views}
            </span>
            <span class="published pad-right">
              <span class="pad-right">•</span> <glyph sn-char="calendar" class="pad-right" />
              <sn-day-ago date="kb_article.published"/>
            </span>
            <span ng-if="kb_article.rating">
              <span class="pad-right">•</span> <uib-rating ng-model="::kb_article.rating" max="5" readonly="true"/>
            </span>
          </span>
        </div>
      </div>
         </div><!-- ngIf -->
    </div>  
    <div>
      <button ng-click="getMore()" ng-if="data.items.length>=4">{{moreOrLess}}</button>
    </div>
   </div>
 </div>

Server Script

// populate the 'data' variable
data.category = "387b2552ff0131009b20ffffffffffdf"
var kb_cat = new GlideRecord("kb_category");
data.categoryDisplay = gs.getMessage("Select a category");
data.items = [];
data.categoryExists = false;
gs.log("data"+kb_cat.get(data.category));
if (kb_cat.get(data.category)) {
  data.categoryExists = true;
  data.categoryDisplay = kb_cat.getDisplayValue();
  data.items = $sp.getKBCategoryArticles(data.category);
}
data.kb_knowledge_page = $sp.getDisplayValue("kb_knowledge_page") || "kb_view";
 data.breadcrumbs = [{label: data.categoryDisplay, url: '#'}];
var rec = kb_cat.parent_id.getRefRecord();
while (rec.getRecordClassName() == "kb_category") {
  data.breadcrumbs.unshift({label: rec.getDisplayValue(), url: '?id=kb_category&kb_category=' + rec.getUniqueValue()});
  rec = rec.parent_id.getRefRecord();
}
data.breadcrumbs.unshift({label: gs.getMessage("Knowledge Base"), url: '?id=' + data.kb_knowledge_page});

Client Controller

function ($scope, $rootScope) {		
 $scope.isMore=false;
 $scope.moreOrLess='More..';
 setInnerText();	
  $rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);
 function setInnerText() {
for (var i = 0; $scope.data.items.length > i; i++) {
     var item = $scope.data.items[i];
   if (item.text.indexOf(">") == -1) {
    item.inner_text = item.text.trim();
    return;
   }
   var t = $("<div>" + item.text + "</div>");
   t = t.text();
   item.inner_text = t.trim();
    }
 } 
 $scope.getMore=function()
 {
  $scope.isMore=!($scope.isMore);
     if($scope.isMore)
   {
    $scope.moreOrLess='Less..'
   }
  else
   {
    $scope.moreOrLess='More..'
   }
 }
}