title: Represent html from JSON array using ng-bind-html
body: <p>I want to render HTML tags from a property of a JSON object and represent them in a modal.</p>
  
  <p>I have this JSON object:</p>
  
  <pre><code>{
  "fileUploadCategories": [
  {
    "id": "Bread",
    "title": "GrandmaBread",
    "info": "Some info text.",
    "restService": "empty",
    "detailedInfo": [ "&lt;h1&gt;Stedsnavn&lt;/h1&gt;",
    "",//line break
    "&lt;i&gt;Some text on a new line.&lt;/i&gt;",
    "",//line break
    "Some text on the next line again &lt;b&gt;Should be bold.&lt;/b&gt;"]
  },
   {
      "id": "Cake",
      "title": "My Cake",
      "info": "Info text blah.",
      "restService": "empty",
      "detailedInfo": "&lt;b&gt;Test&lt;/b&gt; &lt;br&gt; This is a text on a new line &lt;br&gt; New line"
    }
   ]  
  }
  </code></pre>
  
  <p>In my html i use angularjs with ng-repeat and ng-bind-html to bind the data to a bootstrap modal. Here is my code:</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion" ng-repeat="fileUpload in fileUploadConfig" &gt;
  &lt;div class="panel panel-default" &gt;
      &lt;div class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;{{fileUpload.title}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;p class="bg-info"&gt;{{fileUpload.info}}&lt;/p&gt;
          &lt;div class="form-horizontal"&gt;
              &lt;button class="btn btn-primary" id="{{fileUpload.id}}HelpBox" style="float:right" data-toggle="modal" data-target="#{{fileUpload.id}}HelpModal"&gt;
                Hjelp
              &lt;/button&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Modal --&gt;
  &lt;div id="{{fileUpload.id}}HelpModal"class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;{{fileUpload.id}}Help&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body" ng-bind-html="fileUpload.detailedInfo"&gt;
          {{fileUpload.detailedInfo.join('\n')}}
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Lukk&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I have my html text in an array it does not render as it is suppose to. (The first JSON object). It works fine in the second JSON object(just have to remove the .join('\n') ). The reason I have represented the HTML in an array is so that it will be easier to change the text later and see how it will render, instead out putting everything on a single line with html tags inside, which looks really messy.</p>
  
  <p>Is there a better way than using an array to represent the data in the JSON object and get it to render the html tags?</p>