title: AngularJS doesn't parse dynamically loaded data from directive
body: <p>I am trying to create N number of <strong>Select</strong> controls dynamically from directive based on array that is passed in from the attribute (where N is the length of the array).</p>
  
  <p>Structure of an object of the array is as such:</p>
  
  <pre><code>selectDescription = {
      array: arrayObject, //ng-options, a string as 'item as item.name for item in selectArray[0]'
      change: methodName, //ng-change, actionname
      level: levelNumber //level number
  }
  </code></pre>
  
  <p>So the number of <strong>select controls</strong> inside span tag depends on the number of <code>selectDescription(s)</code> that I get from the attribute.</p>
  
  <p><strong>First select control is rendered successfully</strong>. Subsequent select controls should have been rendered on select of an option from <strong>previous rendered select</strong> controls. <strong>But it's not happening in my case</strong>. Although I am successfully appending angular elements in the current <strong>inputEl</strong>(on select of an option), it is not being rendered in the UI. I guess I am missing something very crucial.</p>
  
  <p><strong>On change of selectDescriptions</strong>, a flipped attribute is set, through which I am able to call <code>scope.$editable.render()</code> from link, which in turn runs render function to re-append elements after clearing the previous HTML inside <code>span</code>.</p>
  
  <p>My Code:</p>
  
  <pre><code>app.directive('editableLocation', function(editableDirectiveFactory) {  
      var createElement = function(el, index){
        var newElement = angular.element("&lt;select/&gt;");
        newElement.attr('ng-model','$data'+index);
        newElement.attr('ng-options',el.array);
        newElement.attr('ng-change',el.change.substring(0, el.change.length - 1)+", $data"+index+")");
        return newElement;
      }
  
  var descriptions = [] ;
  var dir = editableDirectiveFactory({
    directiveName: 'editableLocation',
    inputTpl: '&lt;span&gt;&lt;/span&gt;',
    render: function() {
      this.parent.render.call(this);
      this.inputEl.html("");
      for(var i = 0 ; i &lt; descriptions.length ; i ++){
        this.inputEl.append(createElement(descriptions[i], i));
      }
    }
  });
  var linkOrg = dir.link;
  
  dir.link = function(scope, el, attrs, ctrl) {
     console.log(el);
     descriptions = scope.$eval(attrs.description);
     scope.$watch('flipped',function(newValue,oldValue){
          if(newValue != 0){
              scope.$editable.render();
          }
      });
      return linkOrg(scope, el, attrs, ctrl);
  };
  
  return dir;
  });
  </code></pre>