javascript - AngularJS bind specific data to template -

i'm making switch knockout angular. main problem i'm having right in transferring original templates angular recognise.

specifically, here's bit of code i'm having trouble transferring:

<!-- ko template: { name: 'squaretempl', data: squares[5] } --><!-- /ko -->

in knockout, attach squares[5] squaretempl, when template gets rendered, using members within squares[5](or whatever data gets attached).

i need repeat process squares[0]~squares[11]. can't use ng-repeat though since won't iterating through them in numerical order.

ideally, nice if along lines of

<td class="square" id="five" ng-include src="'squaretempl.html'" ng-data="squares[5]">

any ideas?

here's jsfiddle i've written outline failed attempt i've tried using ng-model.

http://jsfiddle.net/fzz3w/9/

two things: first, can make ng-data available implementing yourapp.directive("ngdata", function() {}) secondly, need html part of file? easy way accomplish you're looking in angular ng-repeat like:

<td ng-repeat="item in square">     <div>{{item.name}}</div>  </td> 

when square array updated additional post made.

review modified jsfiddle: http://jsfiddle.net/tdwmf/1/

so hack achieve want, until can offer better solution:

second update using mixed order ng-repeat: http://jsfiddle.net/tdwmf/3/

basically:

<div ng-repeat="index in [4, 2, 0, 3, 1]">    square index: {{index}}<br />    square: {{squares[index]}} </div> 

pretty ugly, , non-ideal, know. i'd recommend performing order array generate in function , doing: ng-repeat="index in displayorder(squares)"