Minimalizing a menu with ng-repeat - angularjs

Question

I know the question title is a little vague but I don't know what else to call it. Basically, this is my problem:
I have an angular menu with submenus. I have each menu item separate and the submenu items being injected with ng-repeat. That is fine, but the problem is I would like to run the entire menu in one ng-repeat and have the json file hold, not only the submenu items, but the menu items as well. This is what I have:
<div class="cnt">
<div class="menu-item" ng-click="toggle(1); open1=!open1">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': open1, 'rotate-back': !open1}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data" >
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
<div class="menu-item" ng-click="toggle(2); open2=!open2">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item 2</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': open2, 'rotate-back': !open2}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>
with a json file that looks like this:
$scope.data =
[{
title: 'Home',
icon: 'home',
link: '/page1/'
}, {
title: 'Email Us',
icon: 'envelope',
link: '/page2/'
}, {
title: 'Profile',
icon: 'user',
link: '/page3/'
}, {
title: 'Print',
icon: 'print',
link: '/page4/'
}];
$scope.data2 =
[{
title: 'Home 2',
icon: 'home',
link: '/page1/'
}, {
title: 'Email Us 2',
icon: 'envelope',
link: '/page2/'
}, {
title: 'Profile 2',
icon: 'user',
link: '/page3/'
}, {
title: 'Print 2',
icon: 'print',
link: '/page4/'
}];
As you can see, if I want 2 menu items, I have to build the code for 2 menu items, add the data to the json, and run the bindings. And if I want 3, then I have to do this 3 times. But what if I want 20? Ideally, I would like to have 1 single HTML structure that pulls the data from the json to create as many menu items with as many submenu items as it finds in the json. But I am having problems trying to achieve this:
This is what makes sense in my head:
<div class="cnt" ng-repeat="item in data">
<div class="menu-item" ng-click="toggle({{item.pos}}); open{{item.pos}}=!open{{item.pos}}">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> {{item.name}}</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': open{{item.pos}}, 'rotate-back': !open{{item.pos}}}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen==={{item.pos}}" >
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.item1[0].linkto}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.item1[0].title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>
I have a CODEPEN that you can see the working code in.
See this CODEPEN for the desired effect. This is how I have it working now and how it should work ultimately.
Thanks fellas!

Answer 1

This answer is not directly addressing the parsing issue, but a solution to what you are trying to achieve.
Instead of using open{{item.pos}} to identify the menu item, which is resulting in parsing error, use the the menuIsOpen,which holds the position of the toggled item. Based on the desired effect.. codepen sample
script additions
//Not needed
// $scope.open1 = false; //initial value
//$scope.open2 = false; //initial value
//$scope.open3 = false; //initial value
//$scope.open4 = false; //initial value
$scope.toggle = function(itemPos) {
if ($scope.menuIsOpen === itemPos) {
$scope.menuIsOpen = 0;
}
else {
$scope.menuIsOpen = itemPos;
}
}
html : just need toggle the item we pass the position property
<div class="cnt" ng-repeat="item in data">
<div class="menu-item" ng-click="toggle(item.pos);">
<md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> {{item.name}}</span>
<i class="fa fa-chevron-down" ng-class="{'rotate180': item.pos==menuIsOpen, 'rotate-back': !menuIsOpen}"></i>
</md-list>
<div class="sub-menu" ng-animate="'animate'" >
<md-menu-item ng-if="menuIsOpen===item.pos" >
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.item1[0].linkto}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.item1[0].title}} a</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>
Let us know
Update : based on your comment, the current setup only deals with item at postion 0 (only 1 item). The JSON (if you do not have control) and you need the item1 item2 etc.. to be displayed you can extend the ng-repeat by going over the entire object and iterate ONLY the ARRAYS. This is not going for the optimal solution just a work around.. sort of..
If there is another array of links inside the array.. this solution will not work.
html
<div class="sub-menu" ng-animate="'animate'" >
<div ng-repeat='(k,v) in item track by $index'>
<div ng-if="isArray(v)">
<md-menu-item ng-if="menuIsOpen===item.pos" ng-repeat='v1 in v track by $index'>
<md-button>
<div layout="row" flex="">
<a ui-sref="{{v1.linkto}}">
<p flex=""><i class="fa fa-{{v1.icon}}"></i> {{v1.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</div>
</div>
</div>
script
$scope.isArray = function(val) {
return Array.isArray(val);
}