title: angular binding to a popover
body: <p>I are trying to bind a $scope.model.value to a popover.</p>
  <p>With all the articles I have something working by storing a copy in the $scope then using a watch to update it if it changes who ever that is not a viable solution as I want to take the popover and use it multiple times with different arrays.</p>
  <p>my html on the the main body is:</p>
  <pre><code>                &lt;button href=&quot;#&quot; colorpopover
                          type=&quot;button&quot;
                          class=&quot;btn btn-success btn-rainbow&quot;
                          data-toggle=&quot;popover&quot;
                          data-trigger=&quot;click&quot;
                          title=&quot;Button Color&quot;
                          id=&quot;static-color-popover-{{$id}}&quot;
                          ng-model=&quot;model.value.buttonStatic.buttonColor&quot;&gt;
                      Button Color
                  &lt;/button&gt;
  </code></pre>
  <p>my controller has this code</p>
  <pre><code>app.directive('colorpopover', function ($compile, $templateCache, $q, $http) {
  
      var getTemplate = function () {
          var def = $q.defer();
  
          var template = '';
          template = $templateCache.get('/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html');
          if (typeof template === &quot;undefined&quot;) {
              $http.get(&quot;/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html&quot;).then(function (data) {
                  $templateCache.put(&quot;templateId.html&quot;, data);
                  def.resolve(data);
              });
          } else {
              def.resolve(template);
          }
          return def.promise;
      }
      return {
          restrict: &quot;A&quot;,
          link: function (scope, element, attrs, model) {
              getTemplate().then(function (popOverContent) {
                  // Make sure to remove any popover before hand (please confirm the method)
                  var compileContent = $compile(popOverContent.data)(scope);
                  var options = {
                      bindToController: true,
                      content: compileContent,
                      placement: &quot;left&quot;,
                      html: true,
                      date: scope.date,                };
                  $(element).popover(options);
              });
          }
      };
  });app.directive('colorpopover', function ($compile, $templateCache, $q, $http) {
  
      var getTemplate = function () {
          var def = $q.defer();
  
          var template = '';
          template = $templateCache.get('/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html');
          if (typeof template === &quot;undefined&quot;) {
              $http.get(&quot;/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html&quot;).then(function (data) {
                  $templateCache.put(&quot;templateId.html&quot;, data);
                  def.resolve(data);
              });
          } else {
              def.resolve(template);
          }
          return def.promise;
      }
      return {
          restrict: &quot;A&quot;,
          link: function (scope, element, attrs, model) {
              getTemplate().then(function (popOverContent) {
                  // Make sure to remove any popover before hand (please confirm the method)
                  var compileContent = $compile(popOverContent.data)(scope);
                  var options = {
                      bindToController: true,
                      content: compileContent,
                      placement: &quot;left&quot;,
                      html: true,
                      date: scope.date,                };
                  $(element).popover(options);
              });
          }
      };
  });
  </code></pre>
  <p>the template in basic terms
  is</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div ng-repeat=&quot;colorGroup in model.value&quot; ng-class=&quot;!$last ? '' : 'last'&quot;&gt;
  &lt;p&gt;{{colorGroup.val1}}&lt;/p&gt;
  &lt;p&gt;{{colorGroup.val2}}&lt;/p&gt;
  &lt;p&gt;{{colorGroup.val3}}&lt;/p&gt;
  </code></pre>
  
  
  <p>the model structure is</p>
  <pre><code>$scope.model.value.buttonStatic.buttonColor[val1,val2,val3]
  $scope.model.value.buttonStatic.buttonHover[val1,val2,val3]
  $scope.model.value.buttonStatic.buttonFocus[val1,val2,val3]
  </code></pre>
  <p>so eventually I want three buttons as a above with each of the tree values passed.</p>
  <p>so at present the ng-repeat is repeating on the model.value of the child scope which is a direct copy of the parent.</p>
  <p>the value in the template is going to change on the popover so it needs to go back to the parent.</p>