HTML in NG-Repeater having strange results

I'm trying to load in HTML from JSON so I can build up dynamic pages and build a simple LMS.

I've got the following code:

Controller

 .controller('TestCtrl', function ($scope, $stateParams) {

        $scope.options = [
            { row: 1, type: "text", data:"<input type='text' text='no work' placeholder='Email'>", title: 'Number One' },
            { row: 1, type: "text", data: "<p>this works</p>", title: 'Number Two' },
            { row: 1, type: "textbox", data: "<div class='ho'>this works</div>", title: 'Number Two' }
        ];

    });

HTML

<ion-view view-title="Test List">
    <ion-content>
        <ion-item ng-repeat="item in options">
            <div ng-bind-html="item.data"></div>
        </ion-item>
    </ion-content>
</ion-view>

The second two work however the first one returns nothing. It renders like (ignore the red arrow):

enter image description here

I think this might give you some insight into what you need to do. I've put together a filter that will make the HTML safe to use in an ng-bind-html directive. Here's a Plunk showing it working.

app.controller('MyController', function($scope, $sce) {
  $scope.someHtmlContent = "<i>Label:</i> <input name='test'>";

  $scope.h = function(html) {
    return $sce.trustAsHtml(html);
  };
}); 

app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });

This is a non-Ionic version of the view showing it:

<body ng-controller="TestCtrl">
  <ul>
    <li ng-repeat="item in options">
      <div ng-bind-html="item.data | trustAsHtml"></div> <!-- note the filter -->
    </li>
  </ul>
</body>

Basically I created a filter ('trustAsHtml') that tells AngularJS to trust your HTML by making use of the $sce service's trustAsHTML() method (part of the ngSanitize module). You have to be careful that the HTML you are supplying truly is safe against attack code coming from users and such, though.

Try change the first input tag attribute from 'text' to 'value'

data:"<input type='text' value='no work' placeholder='Email'>",

Close the input tag. 

data:"<input type='text' value='no work' placeholder='Email' />"

This is really an angular anti pattern (html in your models). There is a chance that the input is being stripped out during interpolation (like a script tag would be).

Take a look at the documentation for $ngSanitize and $sce. ng-bind filters out unsafe html with $sanitize (and I believe this includes input elements). You can override this (not recommended) using $sce to tell angular the text is trusted and does not need to go through the sanitizer.