angularjs multilevel menu didn't work with database

Question

I created multilevel menu in angularjs with ng-repeat using hardcode its work properly, but when i change hardcode to database the dropdown doesn't collapse

it's my controller.js

function menuCtrl($scope,$http) {
  $scope.userName ='Andri';
  $scope.menus;
  $scope.getMenu = function(){
      $http({
        method : 'GET',
        url : 'menu.php'
      }).then(function(response){
        //success
        $scope.menus = response.data;
      },function(response){
        //error
        console.log(response.data, response.status);
      });
    };
    $scope.getMenu();
    // its my hard code

    // $scope.menus = [ //this data willbe taken by encoded php file
    //       {"id" : 1, "parentid" : 0, "name" : "Book Building", "url" : "#", "icon" : "book", "liclass" :""},
    //       {"id" : 2, "parentid" : 1, "name" : "BKB Inquiry", "url" : "#", "icon" : "", "liclass" :""},
    //       {"id" : 3, "parentid" : 1, "name" : "BKB Approval", "url" : "#", "icon" : "", "liclass" :""},
    //       {"id" : 4, "parentid" : 2, "name" : "Sub 1", "url" : "#", "icon" : "", "liclass" :""},
    //       {"id" : 5, "parentid" : 2, "name" : "Sub 2", "url" : "#", "icon" : "", "liclass" :""},
    //       {"id" : 6, "parentid" : 3, "name" : "Sub 1", "url" : "#", "icon" : "", "liclass" :""},
    //       {"id" : 7, "parentid" : 3, "name" : "Sub 2", "url" : "#", "icon" : "", "liclass":""},
    //       {"id" : 8, "parentid" : 7, "name" : "Child Sub", "url" : "#", "icon" : "", "liclass" :""}
    //     ]
};    
        angular
            .module('myApp')
            .controller('MainCtrl', MainCtrl)
            .controller('menuCtrl', menuCtrl)

and this is my menu.php

<?php
header('Content-Type: application/json');
require 'services.php';
$connect = connect();
// Get the data
$menus = array();
$sql = "SELECT * FROM sysMenus";

if($result = mysqli_query($connect,$sql))
{
  $count = mysqli_num_rows($result);
  $i = 0;
  while($row = mysqli_fetch_assoc($result))
  {
      $menus[$i]['id']    = (int)$row['id'];
      $menus[$i]['parentid']  = (int)$row['parentid'];
      $menus[$i]['name'] = $row['name'];
      $menus[$i]['url'] = $row['url'];
      $menus[$i]['liclass'] = $row['liclass'];
      $menus[$i]['icon'] = $row['icon'];
      $menus[$i]['class'] = $row['class'];
      $menus[$i]['portalid'] = $row['portalid'];

      $i++;
  }
}
$json = json_encode($menus);
echo $json;
exit;
?>

its my navigation(menu).html

<li ui-sref-active="active" ng-repeat="x in menus" ng-if="x.parentid==0">
                <a ui-sref="{{x.url}}"><i class="fa fa-{{x.icon}}"></i> <span class="nav-label">{{x.name}},{{x.parentid}}</span></a>
                <ul class="nav nav-second-level collapse" style="height: 0px;">
                    <li ui-sref-active="active" ng-repeat="xx in menus" ng-if="xx.parentid==x.id">
                        <a ui-sref="{{x.url}}"><i class="fa fa-{{x.icon}}"></i> <span class="nav-label">{{xx.name}},{{xx.parentid}}</span></a>
                        <ul class="nav nav-third-level collapse" style="height: 0px;">
                            <li ui-sref-active="active" ng-repeat="xxx in menus" ng-if="xxx.parentid==xx.id">
                                <a ui-sref="{{x.url}}"><i class="fa fa-{{x.icon}}"></i> <span class="nav-label">{{xxx.name}},{{xxx.parentid}}</span></a>
                                <ul class="nav nav-fourth-level collapse" style="height: 0px;">
                                    <li ui-sref-active="active" ng-repeat="xxxx in menus" ng-if="xxxx.parentid==xxx.id">
                                        <a ui-sref="{{xxxx.url}}"><i class="fa fa-{{x.icon}}"></i> <span class="nav-label">{{xxxx.name}},{{xxxx.parentid}}</span></a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>

and it's the screenshoot when i use hardcode in my menu enter image description here