Многоуровневое меню angularjs не работает с базой данных

Я создал многоуровневое меню в angularjs с помощью ng-repeat, используя hardcode, и он работает правильно, но когда я изменяю hardcode на базу данных, выпадающий список не падает

это мой 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)

и это мой 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;
?>

это моя навигация (меню) .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>

и это скриншот, когда я использую жесткий код в моем меню
введите описание изображения здесь