title: AngularJS fromJson returning string?
body: <p>I am experimenting with AngularJS's UI-Router for nested views, which seems to be working. However, in <strong>line 97</strong>, you will find a resolve, which delays the initialization of the nested view until the data is received and processed.</p>
  
  <p>You will notice that I am capturing the json feed into localStorage (<strong>line 123</strong>). I am using this to save a copy of each post for fast data retrieval and UI binding instead of having to wait for a second Ajax request to retrieve that data.</p>
  
  <h2>The Problem</h2>
  
  <p>If you click, any of the links returning from the ajax request, a nested view will appear. The data filling out of the view seems to have been converted to text, entirely. No HTML tag renders as HTML... one complete string.</p>
  
  <h2>Diagnosis</h2>
  
  <p>I am not sure what is causing this. Could it be because I used jQuery Ajax call to retrieve that information?</p>
  
  <p>I previously tried to use Angular's own <a href="http://docs.angularjs.org/api/ng.%24http#methods_jsonp" rel="nofollow">$http.jsonp</a> but I kept getting a type error that I just could NOT figure out... so maybe angular is good at only data "it" fetches?? I personally would like to ditch jQuery in this little app, but it seems to be the only option is is retrieving the data for me without problems. </p>
  
  <h2>Request</h2>
  
  <p>Would like to have the data binded to the final nested view to render as HTML, and not as a string. Thanks!
  <strong>jsFiddle: <a href="http://jsfiddle.net/halkibsi/Z5aEs/11/" rel="nofollow">http://jsfiddle.net/halkibsi/Z5aEs/11/</a></strong></p>
  
  <h2>Note</h2>
  
  <p>This app 3rd level nested view does not show in Firefox, only worked in Chrome and Safari browsers. Did not test in IE or Opera.</p>
  
  <pre><code>    // LOAD MODULES
      angular.module('myApp', ['ui.router'])
  .run([ '$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
      $rootScope.$state = $state;
      $rootScope.$stateParams = $stateParams;
    }]);
  
  
      /*************************/
      // STATES
      /*************************/
      angular.module('myApp')
      .config( ['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {
  
      /***************************/
      // Redirects and Otherwise //
      $urlRouterProvider
          .when('/en', '/en/news')
          .otherwise('/');
  
  
      /************************/
      // State Configurations //
      $stateProvider
  
          /********/
          // HOME //
          /********/
          .state('home', {
              url: '/',
              template: 
                  '&lt;div&gt;'+
                  '&lt;header class="section-title"&gt;&lt;h1&gt;HOME&lt;/h1&gt;&lt;/header&gt;'+
                  '&lt;ul class="nav"&gt;'+
                  '&lt;li ng-class="{ active: $state.includes(\'arabic\') }"&gt;&lt;a ui-sref="arabic"&gt;عربي&lt;/a&gt;&lt;/li&gt;'+
                  '&lt;li ng-class="{ active: $state.includes(\'english\') }"&gt;&lt;a ui-sref="english"&gt;English&lt;/a&gt;&lt;/li&gt;'+
                  '&lt;/ul&gt;'+
                  '&lt;/div&gt;',
          })
  
          /**********/
          // ARABIC //
          /**********/
          .state('arabic', {
              url: '/ar',
              //abstract: true,
              template:
                  '&lt;div dir="rtl"&gt;'+
                      '&lt;header class="section-title"&gt;&lt;h1&gt;الواجهة العربية&lt;/h1&gt;&lt;/header&gt;'+
                      '&lt;ul class="nav"&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'home\') }"&gt;&lt;a ui-sref="home"&gt;الصفحة الرئيسية&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'english\') }"&gt;&lt;a ui-sref="english"&gt;English Interface&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li&gt;&lt;a href="#/ar/ndc-news"&gt;أخبار&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li&gt;&lt;a href="#/ar/ndc-photos"&gt;صور&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li&gt;&lt;a href="#/ar/ndc-videos"&gt;فيديو&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li&gt;&lt;a href="#/ar/ndc-podcasts"&gt;صوتيات&lt;/a&gt;&lt;/li&gt;'+
                      '&lt;/ul&gt;'+
                      '&lt;!-- MAIN UI VIEW FOR THIS TEMPLATE --&gt;'+
                      '&lt;div ui-view ng-animate="{enter:\'fade-enter\'}"&gt;&lt;/div&gt;'+
                  '&lt;/div&gt;',
          })
  
          /***********/
          // ENGLISH //
          /***********/
          .state('english', {
              //abstract: true,
              url: '/en',
              template:
                  '&lt;div&gt;'+
                      '&lt;header class="section-title"&gt;&lt;h1&gt;English Interface&lt;/h1&gt;&lt;/header&gt;'+
                      '&lt;ul class="nav"&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'home\') }"&gt;&lt;a ui-sref="home"&gt;Home&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'arabic\') }"&gt;&lt;a ui-sref="arabic"&gt;الواجهة العربية&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'english.news\') }"&gt;&lt;a ui-sref="english.news"&gt;News&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'english.photos\') }"&gt;&lt;a ui-sref="english.photos"&gt;Photos&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'english.videos\') }"&gt;&lt;a ui-sref="english.videos"&gt;Videos&lt;/a&gt;&lt;/li&gt;'+
                          '&lt;li ng-class="{ active: $state.includes(\'english.podcasts\') }"&gt;&lt;a ui-sref="english.podcasts"&gt;Podcasts&lt;/a&gt;&lt;/li&gt;'+
                      '&lt;/ul&gt;'+
                      '&lt;!-- MAIN UI VIEW FOR THIS TEMPLATE --&gt;'+
                      '&lt;div ui-view ng-animate="{enter:\'fade-enter\'}"&gt;&lt;/div&gt;'+
                  '&lt;/div&gt;',
          })
  
              // English -&gt; NDC News
              .state('english.news', {
                  url: '/news',
                  template:
                      '&lt;header class="section-title"&gt;&lt;h2&gt;News&lt;/h2&gt;&lt;/header&gt;'+
                      '&lt;ul&gt;'+
                        '&lt;li ng-repeat="post in posts"&gt;&lt;a ui-sref="english.news.single({postId:post.id})"&gt;{{ post.title }}&lt;/a&gt;&lt;/li&gt;'+
                      '&lt;/ul&gt;'+
                          '&lt;div style="margin: 0 0 0 2em;"&gt;'+
                          '&lt;!-- MAIN UI VIEW FOR THIS TEMPLATE --&gt;'+
                          '&lt;div class="ui-view-lev2" ui-view&gt;&lt;/div&gt;'+
                      '&lt;/div&gt;',
                  resolve: {
                      news: function() {
                              return $.ajax({
                                  type: "GET",
                                  url: "http://ndcye.org/api/get_posts/?post_type=post&amp;cat=3&amp;callback=?",
                                  dataType: "jsonp",
                                  success: function(response){
                                      //console.log(response);
  
                                      var newsList = [];
                                      for ( var i=0; i &lt; response.posts.length; i++) {
  
                                          var id = response.posts[i].id;
                                          var title = response.posts[i].title;
                                          var thumbnail = response.posts[i].thumbnail_images.mobile.url;
                                          var excerpt = response.posts[i].excerpt;
                                          var content = response.posts[i].content;
  
                                          // SAVE POST AS AN OBJECT
                                          var post_object = {
                                              id: id,
                                              title: title,
                                              thumbnail: thumbnail,
                                              excerpt: excerpt,
                                              content: content,
                                          };
                                          if (localStorage.getItem( 'post_object_'+id ) === null) {
                                              localStorage.setItem( 'post_object_'+id, angular.toJson(post_object) );
                                          }
  
                                          newsList.push(post_object);
                                      }
  
                                      localStorage.setItem( 'ndc_news', angular.toJson(newsList) );
                                      console.log( newsList );
                                  },
                                  error: function(){
                                      console.log("error!");
                                  }
                              });
                      }
                  },
                  controller: ['news', '$scope', '$state', function (news, $scope, $state) {
                      $scope.posts = news.posts;
                      console.log($scope.posts);
                  }], // controller end
              })
  
                  // English -&gt; NDC News Single
                  .state('english.news.single', {
                      url: '/{postId:[0-9]{1,4}}',
                      template:
                          '&lt;header class="section-title"&gt;&lt;h3&gt;{{ singlePost.title }}&lt;/h3&gt;&lt;/header&gt;'+
                          '&lt;div&gt;{{ singlePost.content }}&lt;/div&gt;',
                      controller: ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {
                          var singlePost = '';
                          singlePost = angular.fromJson( localStorage.getItem( 'post_object_' + $stateParams.postId ) );
  
                          $scope.singlePost = singlePost;
                          console.log( singlePost );
                      }]
                  })
  
  
  
  
  
  
  
  
              // English -&gt; NDC Photos
              .state('english.photos', {
                  url: '/photos',
                  template:
                      '&lt;header class="section-title"&gt;&lt;h2&gt;Photos&lt;/h2&gt;&lt;/header&gt;'+
                      'Photo albums go here',
              })
  
              // English -&gt; NDC Videos
              .state('english.videos', {
                  url: '/videos',
                  template:
                      '&lt;header class="section-title"&gt;&lt;h2&gt;Videos&lt;/h2&gt;&lt;/header&gt;'+
                      'YouTube playlists go here',
              })
  
              // English -&gt; NDC Podcasts
              .state('english.podcasts', {
                  url: '/podcasts',
                  template:
                      '&lt;header class="section-title"&gt;&lt;h2&gt;Podcasts&lt;/h2&gt;&lt;/header&gt;'+
                      'Podcast playlists go here',
              })
  
  
  
    } // end function ($stateProvider,   $urlRouterProvider)
  
      ]) // end .CONFIG
      ; // ens STATES
  </code></pre>