title: angularjs create html with data binding based on object properties and template
body: <p>I'm trying to create a html view in angularjs where the user can edit some values on an objects properties. I have a object of the model in a service and then i also have another object that describes the properties of the model object. </p>
  
  <p>The description object has an array of objects called parameters and each object has properties such as name, description, type and so on like this:</p>
  
  <pre><code>{
  "name": "item",
  "description": "An item",
  "parameters": [{
      "name": "prop1",
      "wasNullable": false,
      "description": "a property",
      "type": "string",
      "isRequired": true
  }, {
      "name": "prop2",
      "wasNullable": true,
      "description": "a property",
      "type": "string",
      "isRequired": true
  }]
  </code></pre>
  
  <p>}</p>
  
  <p>Im want to use this data to build a view for the object that is to be manipulated. If the property name is a string i want to have an html-template with a text input and a label like this:</p>
  
  <pre><code>&lt;label&gt;{{ parameter.name&lt;/label&gt;
  &lt;input type="text" placeholder="parameter.description"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>I want to be able to have these "type templates" as separate html files. </p>
  
  <p>Im having trouble on how to do this and handle data-binding. One path could be to do an ng-repeat on the parameters array on the description object something like this: </p>
  
  <pre><code>&lt;div ng-repeat="param in $ctrl.definitions.parameters"&gt;
  &lt;div ng-switch="param.primitiveType"&gt;
      &lt;div ng-switch-when="string"&gt;
          &lt;string&gt;&lt;/string&gt;
      &lt;/div&gt;
      &lt;div ng-switch-when="dateTime"&gt;
          &lt;date-time&gt;&lt;/date-time&gt;
      &lt;/div&gt;
      &lt;div ng-switch-when="enum"&gt;
          &lt;enum&gt;&lt;/enum&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div ng-if="param.subTypes"&gt;
      &lt;select ng-model="select.subType"&gt;
          &lt;option ng-repeat="subType in property.subTypes"&gt;{{ subType.name }}&lt;/option&gt;
      &lt;/select&gt;
      &lt;div ng-repeat="subType in property.subTypes"&gt;
          &lt;properties type="subType" ng-if="select.subType === subType.name"&gt;&lt;/properties&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>This would solve my problem because i could use components for each type of property but i can't figure out how to do the databinding to another object that exists in a service. </p>
  
  <p>Another way would be to add all the parameters with default values from the description object to the actual model object and then do ng-repeat on the referenced model object but then i can't have this solution of switching to the correct html template. </p>
  
  <p>Any ideas on how to solve this? </p>