How do I get HTML data returned in json to be parsed by the browser - Cordova/Ionic

Question

Ok, I have data coming back from a Drupal service. I am using AngularJS and the ionic framework that packages html/css/js into a hybrid app for mobile platforms, using Cordova or Phonegap. Here's a link to my code in codepen: http://codepen.io/BruceWhealtonSWE/pen/PqOZeV

I suppose I should have used script tags to hold the partial views, as the about page that I am showing in the html view is not right. In my code, there is an index.html file and that makes the about.html file much smaller.
Anyway, the important part of the code is the app.js file and in particular the controller.

.controller('AboutController', ['$scope', '$http', '$state', function($scope, $http, $state) {
    $http.get('http://toptenbooks.net/api/v1/node/6').success(function(data) {
      console.log(data.body.und[0].value.toString());
      $scope.title = data.title;
      $scope.body = data.body.und[0].value.toString();
    });
  }]);

I can console.log the body text and it is right. It is html content not just plain text. The output from ionic serve shows the html as just text. So, my Drupal based api returns json.
On the about page where I want html to be rendered, in the template, I get the html looking like plain text.

Here is the about.html view:

<ion-view view-title="Information about the App">

  <ion-pane>

      <div class="card">

          <h2>{{title}}</h2>
          <div>{{body}}</div>


      </div>

  </ion-pane>
</ion-view>

Thanks in advance for any help/tips, Bruce

Answer 1

If you want to display html from a variable in angular, you need to use a directive:

<div ng-bind-html="variable"></div>

Documentation: https://docs.angularjs.org/api/ng/directive/ngBindHtml