popover functionality lost once another popover is accessed

I have multiple popovers on a page. some have are multiples of the same popover (directive/controller) with different ng-model passed. Others are completely different. when I open are p1 it displays and functions as it should. once I open p2, p2 operates as expected and p1 displays the correct information but can not use any of the controls in p1. when I open p3, p3 operates as expected and p1 and p2 displays the correct information but can not use any of the controls in p1,p2.

The controls are a mixture of toggle buttons, sliders, drop downs.

button that displays the popover

<button href="#" spacingpopover
                            type="button"
                            class="btn btn-success btn-spacing"
                            data-toggle="popover"
                            title="Padding & Margins"
                            id="button-spacing-popover-{{$id}}"
                            ng-model="model.value.spacing"
                            style="width:100%"
                            class-id="button-spacing"
                            class-name="button">
                        Padding & Margins
                    </button>

directive

 app.directive('colorpopover', function ($compile, $templateCache, $q, $http) {
        var getTemplate = function () {
            var def = $q.defer();
    
            var template = '';
            template = $templateCache.get('color.html');
            if (typeof template === "undefined") {
                $http.get("/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html").then(function (data) {
                    $templateCache.put("color.html", data);
                    def.resolve(data);
                });
            } else {
                def.resolve(template);
            }
            return def.promise;
        }
        return {
            restrict: "A",
            require: 'ngModel', // ensures the model is passed in
            scope: { model: '=ngModel' }, //ties the ng-model to the scope of the popover
            controller: 'ColorPopoverCtrl',
            link: function (scope, element, attrs, model) {
                getTemplate().then(function (popOverContent) {
                    // Make sure to remove any popover before hand (please confirm the method)
                    scope.colorPalette = scope.$parent.colorPalette;
                    scope.units = scope.$parent.units;
                    scope.classId = attrs.classId;
                    scope.className = attrs.className;
                    var compileContent = $compile(popOverContent.data)(scope);
                    var options = {
                        placement: "left",
                        html: true,
                        content: compileContent,
                        container: '.ibd-cms'
                    };
                    $(element).popover(options);
    ..........
}

controller

app.controller('ColorPopoverCtrl', function ($scope) {
    $scope.adjustOpacity = function (node) {
        node.opacity = node.opacity;
        node.rgba.a = node.opacity;
        console.log($scope)
        console.log($scope.model.value)
    }
.............
}

Source: AngularJS Questions