Display data of objects in table in ascending order angularjs

Question

When I console.log my details variable I get the following results:

details:{ 111:{ 2015-2-10 : 0 2015-2-11 : 0 2015-2-12 : 0 2015-2-13 : 0 2015-2-14 : 0 2015-2-15 : 0 2015-2-16 : 0 2015-2-17 : 0 2015-2-18 : 0 2015-2-19 : 0 2015-2-2 : 0 2015-2-20 : 0 2015-2-21 : 0 2015-2-22 : 0 2015-2-23 : 0 2015-2-24 : 0 2015-2-25 : 0 2015-2-26 : 0 2015-2-27 : 1 2015-2-28 : 1 2015-2-3 : 0 2015-2-4 : 0 2015-2-5 : 0 2015-2-6 : 0 2015-2-7 : 0 2015-2-8 : 0 2015-2-9 : 0 2015-3-1 : 0 } }

Now I want them to convert in table and achieve the output which looks like this:

The dates are inline and in ascending order but I am not sure how to that. Am I doing right or should I re-code it?

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>no</td>
    <td>2015-2-10</td>
    <td>2015-2-11</td>
    <td>2015-2-12</td>
    <td>2015-2-13</td>
    <td>2015-2-14</td>
    <td>2015-2-15</td>
    <td>2015-2-16</td>
    <td>2015-2-17</td>
    <td>2015-2-18</td>
    <td>2015-2-19</td>
    <td>2015-2-20</td>
    <td>2015-2-21</td>
    <td>2015-2-22</td>
    <td>2015-2-23</td>
    <td>2015-2-24</td>
    <td>2015-2-25</td>
    <td>2015-2-26</td>
    <td>2015-2-27</td>
    <td>2015-2-28</td>
    <td>2015-3-1</td>
    <td>2015-3-2</td>
    <td>2015-3-3</td>
    <td>2015-3-4</td>
    <td>2015-3-5</td>
    <td>2015-3-6</td>
    <td>2015-3-7</td>
    <td>2015-3-8</td>
    <td>2015-3-9</td>
    <td>2015-3-10</td>
    <td>2015-3-11</td>
    <td>2015-3-12</td>
    <td>2015-3-13</td>
    <td>2015-3-14</td>
    <td>2015-3-14</td>
    <td>2015-3-15</td>
    <td>2015-3-16</td>
    <td>2015-3-17</td>
  </tr>

  <tr>
    <td>111
      <td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
  </tr>

  <tr>
    <td>222
      <td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
  </tr>
  <table>

My working plunker is http://plnkr.co/edit/dQO3D1Omc0o7ZH9TfeUZ?p=preview.

Any help would be much appreciated. Thanks in advance.

Answer 1

Angular provides the orderBy filter that you can use to sort things in ng-repeat.

Something like this should work for your details example. I'm not sure what your data values represent or if they're important. You should replicate the following for each data set that you want to order.

<table>
    <tr ng-repeat="(date, number) in details.111 | orderBy:'date'">
</table>

Alternatively, you could store your dates in an array and sort once in the controller.