title: How do display json data in view using Angular
body: <p>I am learning Angularjs and trying to implement it in my C# web MVC application for the first time.</p>
  
  <p>I am unable to get json format data returned from my controller to display in my view which uses Angular/Razor for data purposes</p>
  
  <p>In my C# controller I return json data to my coffe scrip/js</p>
  
  <pre><code>public ActionResult Load (string id){
  //data retrieved from model and formatted in json here
  return Json(jsonData ,JsonRequestBehavior.AllowGet);
  </code></pre>
  
  <p>In My coffee script I have:</p>
  
  <pre><code>define ['test'], (app) -&gt;
       ($scope, $http, $location) -&gt;
          $scope.vData = (id) -&gt;
              $.ajax
                  url: 'Mobile/Load?id=1237'
              .done (response) -&gt; 
                  alert response
                  $scope.vdata = [response]
                  $scope.$apply() unless $scope.$$phase
  </code></pre>
  
  <p>When I launch the application the view has  an alert button that I used to test If I can see the data from the json response:</p>
  
  <p>The alert shows data in the following format:</p>
  
  <pre><code>{
     "versions":{
        "is_live":"true",
        "type":"multiple",
        "rendition":{
           "@name":"My Test",
           "@url":"http://test.net/location/test.m3u8",
           "@thumbnail":"http:// test.net/location/testimg/cam.png",
           "@thumbnail_update_interval":"10"
        }
     }
  }
  </code></pre>
  
  <p>In my view I have tried to get data in a  label several ways but unsuccessful:</p>
  
  <pre><code>&lt;label&gt;{{vdata.is_live}}&lt;/label&gt;
  &lt;label&gt;{{vdata.versions.is_live}}&lt;/label&gt;
  &lt;label&gt;{{is_live}}&lt;/label&gt;
  </code></pre>
  
  <p>While debugging in my browser I noticed that  json data is in a string format and not an object.</p>
  
  <p>Could this be the problem?</p>
  
  <p>Can someone please help me to display data in my view from the json data using Angular? </p>