title: Compiled Text Bind Does Not Show Up Until You Click A Button
body: <p>I have a simple web app that lists users by first name and the city they live in.
  When the user clicks their name or city, the elements will be replaced by two input elements. One for the name and the second is for the city they live in. The input element(s) will help the user update their first name and city. Simple AngularJS Directive DOM Manipulation.</p>
  
  <p>The problem I have is that when someone clicks the name or the city element, the bind text does not show up in the input element until you click the save update button in my info directive.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html id="ng-app" ng-app="app"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;JS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt; 
      &lt;div  ng-controller="UserController"&gt;
          &lt;div&gt;
              Search:
              &lt;input placeholder="search customers" data-ng-model="name" /&gt;
          &lt;/div&gt;
          &lt;div &gt;
              &lt;h4&gt;Customers&lt;/h4&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="cust in customers | filter:name" &gt;
                                              &lt;!-- My Info Directive --&gt;
                      &lt;info update="updateCustomer(this)" name="cust.name" city="cust.city"&gt;&lt;/info&gt;
                  &lt;/li&gt;
              &lt;/ul&gt; 
          &lt;/div&gt;
          &lt;div&gt;
              Name: &lt;input type="text" ng-model="newCustomer.name" /&gt;&lt;br /&gt;
              City: &lt;input type="text" ng-model="newCustomer.city" /&gt;&lt;br /&gt;
              &lt;button ng-click="addCustomer()" &gt;Add New Customer&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the JavaScript (main.js):</p>
  
  <pre><code> var app = angular.module("app",[])
  .controller('UserController',function ControllerOne($scope){
  $scope.customers = [ 
      {name:"Milo",city:"London"},
      {name:"John", city:"New York"},
      {name:"Alfred",city:"Oslo"}
  ];
  $scope.addCustomer = function (){
      $scope.customers.push({name:$scope.newCustomer.name, city:$scope.newCustomer.city});
      $scope.newCustomer.name = $scope.newCustomer.city = "";
  };
  $scope.updateCustomer = function(ele){
      console.log("Name: " + ele.name + " City: " + ele.city);
  }
  })
  .directive("info",function($compile){
  return {
      restrict :"E",
      scope:{
          name:"=",
          city:"=",
          update:"&amp;"
      },
      template:"&lt;div&gt;{{name}}-{{city}}&lt;/div&gt;", 
      link:function(scope,element,attrs){
          element.bind("click",function(){
              var html = "&lt;input name='name' ng-model='name'/&gt;&lt;input name='city'ng-model='city'/&gt;&lt;button ng-click='update(this)'&gt;Save Update&lt;/button&gt;";
              var dataScoped = $compile(html)(scope);
              element.replaceWith(dataScoped); 
              });
  
  
          }
      }
  });
  </code></pre>