title: Display json data using angularjs in html page
body: <p>I have to display name and ownername in html page, data is in JSON format (from  MongoDB database)</p>
  
  <p>While displaying in html, I am getting name correctly but ownername is not displaying properly instead it's displaying the complete object inside owner.</p>
  
  <p>Json:</p>
  
  <pre><code>/* 1 */
  {
      "_id" : ObjectId("550994e21cba9597624195aa"),
      "name" : "Deploy Renderer Code",
      "detail" : "Deploy Renderer code in PROD 1 boxes.",
      "scheduledStartDate" : ISODate("2015-05-12T09:00:00.000Z"),
      "scheduledEndDate" : ISODate("2015-05-12T11:00:00.000Z"),
      "env" : "PROD 1",
      "type" : "Pre Release Activity",
      "team" : {
          "id" : "55097d581cba95976241958d",
          "name" : "Renderer"
      },
      "owners" : [ 
          {
              "ownerName" : {
                  "id" : "VENKAT17",
                  "name" : "Sundar Venkataraman"
              },
              "ownerTeam" : {
                  "id" : "550992951cba9597624195a8",
                  "name" : "RETS"
              }
          }
      ],
      "comments" : "Add SPI number, if any.",
      "release" : {
          "id" : "5509904f1cba9597624195a5",
          "name" : "LexisAdvance R5.1"
      },
      "status" : "Assigned"
  }
  </code></pre>
  
  <p>Angular view (html code)</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="text-align: center;"&gt;Task name&lt;/th&gt;
              &lt;th style="text-align: center;"&gt;Owner name&lt;/th&gt;
              &lt;th style="text-align: center;"&gt;Authorize&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="task in taskDetails"&gt;
                  &lt;td style="text-align: center;"&gt;{{task.name}}&lt;/td&gt;
                  &lt;td style="text-align: center;"&gt;{{task.owners}}&lt;/td&gt;
                  &lt;td  style="text-align:center;"&gt;
                      &lt;button class="btn btn-mini btn-primary" ng-click="approveTask(taskDetails.indexOf(task), task)"&gt;Approve&lt;/button&gt;
                      &lt;button class="btn btn-mini btn-danger" ng-click="rejectTask(taskDetails.indexOf(task), task)"&gt;Reject&lt;/button&gt;
                  &lt;/td&gt;
              ![enter image description here][1]&lt;/tr&gt;
  
          &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>