html table - Angularjs double ng-repeat data shown from back to front, Why? -

i have 2 confused points in code,

first one, html:

<table class="table table-hover" my-element="docu"> 

i used double ng-repeat, data shown front. how fix this?

angularjs file:

this data:

$scope.people = [     {'name':1,'des':'nice','age':12},     {'name':2,'des':'good','age':13}   ]; .......... .directive('myelement', function () {   return {     scope: {       items: '=myelement'     },     restrict: 'eac',     template: '<tr ng-repeat="item in items" ><td ng-repeat="p in item">{{p}}</td></tr>'   }; }); 

the result:

12  nice    1 13     2 

the result should this:

1   nice    12 3      13 

second one,

i used ng-if check data's length, if there's no data, table's body shown "upload file". sentence shows table head. don't know why. how fix this?

html:

<tbody my-element="people">                   <span ng-if="people.length == 0">upload file</span>         </tbody> 

my result(if there's no data):

upload file name    des age 

the result should this:

name    des age upload file 

the link code, please check it:

http://codepen.io/acesai/pen/zbeexn?editors=101

first answer

i guess syntax of second ng-repeat should (key, value) in obj.

basically when angular perform ng-repeat on objects's key sorted keys alphabetically reason output not expected.

so if see. output :

age des name

12 nice 1

13 2

is makes sense.

to overcome can iterate array , use object.propertyname.

i din't second question. suspecting there html ordering issue. explain second issue more.