angular binding to a popover

I are trying to bind a $scope.model.value to a popover.

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.

my html on the the main body is:

                <button href="#" colorpopover
                        type="button"
                        class="btn btn-success btn-rainbow"
                        data-toggle="popover"
                        data-trigger="click"
                        title="Button Color"
                        id="static-color-popover-{{$id}}"
                        ng-model="model.value.buttonStatic.buttonColor">
                    Button Color
                </button>

my controller has this 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 === "undefined") {
            $http.get("/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html").then(function (data) {
                $templateCache.put("templateId.html", data);
                def.resolve(data);
            });
        } else {
            def.resolve(template);
        }
        return def.promise;
    }
    return {
        restrict: "A",
        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: "left",
                    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 === "undefined") {
            $http.get("/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html").then(function (data) {
                $templateCache.put("templateId.html", data);
                def.resolve(data);
            });
        } else {
            def.resolve(template);
        }
        return def.promise;
    }
    return {
        restrict: "A",
        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: "left",
                    html: true,
                    date: scope.date,                };
                $(element).popover(options);
            });
        }
    };
});

the template in basic terms
is

<div class="row">
    <div ng-repeat="colorGroup in model.value" ng-class="!$last ? '' : 'last'">
<p>{{colorGroup.val1}}</p>
<p>{{colorGroup.val2}}</p>
<p>{{colorGroup.val3}}</p>

the model structure is

$scope.model.value.buttonStatic.buttonColor[val1,val2,val3]
$scope.model.value.buttonStatic.buttonHover[val1,val2,val3]
$scope.model.value.buttonStatic.buttonFocus[val1,val2,val3]

so eventually I want three buttons as a above with each of the tree values passed.

so at present the ng-repeat is repeating on the model.value of the child scope which is a direct copy of the parent.

the value in the template is going to change on the popover so it needs to go back to the parent.

Source: AngularJS Questions