I have a datatype "IBD Color Picker" using the umbraco.colorpicker that I want to access from a custom plugin.

This is what I have so far I dont know if Im on the right track or not but some help would be appreciated.

Im using umbraco v8.4

html

<div ng-controller="IBD.TagStyler.Controller">
    <div class="IBD_CMS">

// The section below needs to display my IBD Color Picker switches //

        <div class="umb-color-swatches" ng-class="{ 'with-labels': useLabel }">
            <button type="button" class="umb-color-box umb-color-box--{{size}} {{colorClassNamePrefix}}-{{color.value}}" ng-repeat="color in colors" title="{{useLabel || useColorClass ? (color.label || color.value) : ('#' + color.value)}}" hex-bg-inline="{{useColorClass === false}}" hex-bg-color="{{color.value}}" ng-class="{ 'active': isSelectedColor(color) }" ng-click="setColor(color, $index, $event)">
                <div class="umb-color-box-inner">
                     <div class="check_circle">
                         <i class="icon icon-check small" ng-show="isSelectedColor(color)"></i>
                     </div>
                     <div class="umb-color-box__label" ng-if="useLabel">
                     <div class="umb-color-box__name truncate">{{ color.label || color.value }}</div>
                     <div class="umb-color-box__description">#{{ color.value }}</div>
                 </div>

             </button>
         </div>
     </div>
</div>

js

angular.module("umbraco").controller("IBD.TagStyler.Controller",
    function($scope) {

    $scope.model.value = { bottomMargin: $scope.model.value.bottomMargin || 0 };
    $scope.model.value = { topMargin: $scope.model.value.topMargin || 0 };

    $scope.model.value = { textColorH1: $scope.model.value.textColorH1 || 0 };

 ????? What do I need in here ??????

}); 

manifest

{
  propertyEditors:[
    {
      alias: "IBD.TagStyler",
      name: "Intelligence By Design Tag Styler",
      editor: {
        view: "~/App_Plugins/IBD.TagStyler/IBD.TagStyler.View.html",
        valueType: "JSON"
      }
    }
  ],
  javascript: [
    "~/App_Plugins/IBD.TagStyler/IBD.TagStyler.js",
    "~/Umbraco/Js/umbraco.controllers.js"

  ],
  css: [
    "~/App_Plugins/IBD.TagStyler/style.css"
  ]
}