title: dynamic template adds empty value on ng-repeat
body: <p>I have been trying to make a query builder for my own purpose. 
  This plunker <a href="https://plnkr.co/edit/95VgJfH9nIScwApXyKOu?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/95VgJfH9nIScwApXyKOu?p=preview</a> has my work so far,</p>
  
  <p>When I select a parameter and Click on add, it adds up in the JSON but does not show up in the ng-repeat in the template. Unable to figure out why this happens .</p>
  
  <p>My JS</p>
  
  <pre><code>var app = angular.module('testApp', []);
  app.controller('MainController', ['$scope', function($scope) {
    $scope.rules = {
      name: "",
      service: "",
      identifier: "",
      operator: "",
      parameter: [],
      operatorGlobal: "and",
      value: ""
    }
  
    $scope.data = {
      Region: ["region2", "region1", "region3"],
      VolumeId: ["V001", "V003"]
    }
  
    for (var i in $scope.data) {
      $scope.rules.parameter = Object.keys($scope.data);
    }
  
    $scope.out = {
      parameter: ""
    }
  
    $scope.output = [];
  
    $scope.addCondition = function() {
      $scope.outputData = {
        type: $scope.out.parameter,
        operator: "",
        value: "",
        operatorGlobal: ""
      }
      $scope.output.push($scope.outputData)
  
      $scope.removeCondition = function(index) {
        $scope.output.splice(index, 1);
        console.log($scope.output.outputData)
      }
    }
  }]);
  app.directive('newQuery', ['$compile', '$templateRequest', function($compile, $templateRequest) {
    return {
      controller: 'MainController',
      replace: false,
      scope: false,
      transclude: false,
      link: function(scope, element, attrs) {
        var template;
  
        $templateRequest("query.html").then(function(html) {
          template = angular.element(html);
          element.append(template);
          $compile(template)(scope);
        });
      }
    };
  
  }]);
  </code></pre>
  
  <p>My HTML </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html ng-app="testApp"&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body style="padding:0 25px" ng-controller="MainController"&gt;
    &lt;div class="row"&gt;
      &lt;!-- Parameter --&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="col-md-4 control-label" for="selectbasic"&gt;Parameter&lt;/label&gt;
        &lt;select id="selectbasic" name="selectbasic" class="form-control" ng-model="out.parameter"&gt;
          &lt;option value="" selected=""&gt;Select identifier&lt;/option&gt;
          &lt;option ng-repeat="vals in rules.parameter" value="{{vals}}"&gt;{{vals}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;!-- Operator --&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="col-md-4 control-label" for="selectbasic"&gt;Operator&lt;/label&gt;
        &lt;select id="selectbasic" name="selectbasic" class="form-control" ng-model="rules.operator"&gt;
          &lt;option value="" selected=""&gt;Option one&lt;/option&gt;
          &lt;option value={{operator}} ng-repeat="operator in operators"&gt;{{operator}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;!-- Value --&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="col-md-4 control-label" for="selectbasic"&gt;Value&lt;/label&gt;
        &lt;input type="text" class="form-control" placeholder="value" ng-model="rules.value"&gt;
      &lt;/div&gt;
      &lt;!-- Operator --&gt;
      &lt;div class="form-group radios"&gt;
        &lt;label class="radio-inline" for="radios-0"&gt;
          &lt;input type="radio" name="radios" id="radios-0" value="and" ng-model="rules.operatorGlobal"&gt; AND
        &lt;/label&gt;
        &lt;label class="radio-inline" for="radios-1"&gt;
          &lt;input type="radio" name="radios" id="radios-1" value="or" ng-model="rules.operatorGlobal"&gt; OR
        &lt;/label&gt;
        &lt;button class="btn btn-emarald-transparent btn-sm pull-right" ng-click="addCondition()"&gt;Add &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-sm-6 col-lg-6"&gt;
        &lt;h4&gt;Condition&lt;/h4&gt;
        &lt;hr/&gt;
        &lt;div ng-repeat="data in output track by $index" class="row condition text-center" new-query=""&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 col-sm-6 col-lg-6" style="margin-top: 10px"&gt;
        &lt;pre&gt;{{output | json:4}}&lt;/pre&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/ng-template" id="query.html"&gt;
      &lt;span&gt;{{data.type}}&lt;/span&gt;
      &lt;span&gt;{{data.operator}}&lt;/span&gt;
      &lt;span&gt;{{data.value}}&lt;/span&gt;
      &lt;i class="fa fa-minus-circle text-permission pointer" ng-click="removeCondition($index)"&gt;{{$index}}&lt;/i&gt;
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>