html not rendered in ng-template

I have some json with correct format that passed from laravel controller and i want to show them recursively with angular but the HTML inside ng-template not rendered. what's wrong?

note: I replaced the angular default tag with <% %>

<div id="treeViewContent" ng-init="getTreeData()">

      <script type="text/ng-template" id="directoryTree">
        <div class="tree-item" ng-click="loadDir(dir.address)">
          <i class="fa fa-folder orange"></i>
          <% dir.name %>
        </div>
        <ul ng-if="dir.subdir">
            <li ng-repeat="dir in dir.subdir" ng-include="'directoryTree'"></li>
        </ul>
      </script>
      <ul class="noselect">
          <li>
            <div class="tree-item" ng-click="loadDir('/')">
              <i class="fa fa-hdd-o blue"></i>
              
            </div>
            <ul>
              <li ng-repeat="dir in dirs" ng-include="'directoryTree'"></li>
            </ul>
          </li>
      </ul>

    </div>

and getTreeData() is:

  $scope.dirs = [];

  $scope.getTreeData = function()
  {
      $http.post("/admin/drive/treeData", {_token: csrf_code}).then(function(response)
      {
        if (response.status == 200)
        {
          $scope.dirs = response.data;
        }
        else
        {
          Flash({status: "failed", message: "Error"});
        }
      })
  }

and json data

 [  
   {  
      "name":"image",
      "address":"\/image",
      "subdir":[  
         {  
            "name":"document",
            "address":"\/image\/document",
            "subdir":[  

            ]
         }
      ]
   },
   {  
      "name":"document",
      "address":"\/document",
      "subdir":[  

      ]
   },
   {  
      "name":"movies",
      "address":"\/movies",
      "subdir":[  

      ]
   }
]

via menhajrrt