I'm trying to create a custom property type that uses the built in property type for the Umbraco color picker but not having much luck!

I'm a bit of an Angular noob so forgive me if I'm missing something obvious!

I've had a look at the Umbraco source to get the HTML for the view and the code for the controller and created them in files in UIMatic\backoffice\views as colorpicker.html and colorpicker.controller.js. Both of these files get called but I'm getting console errors when I use them. Code for the HTML file is (copied from Umbraco source)

<div ng-controller="UIOMatic.Views.ColorPickerController">

<div ng-if="!isConfigured">
    <localize key="colorpicker_noColors">You haven't defined any colors</localize>
</div>

<ul class="thumbnails color-picker">
    <li ng-repeat="(key, val) in property.config.items" ng-class="{active: property.value === val}">
        <a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val}}">

        </a>
    </li>
</ul>

Code for controller is :

function ColorPickerController($scope) {
$scope.toggleItem = function (color) {
    if ($scope.model.value == color) {
        $scope.model.value = "";
    }
    else {
        $scope.model.value = color;
    }
};
$scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;}
angular.module("umbraco").controller("UIOMatic.Views.ColorPickerController", ColorPickerController);

However, I get the following error:

TypeError: Cannot read property 'config' of undefined at new ColorPickerController

and it refers to this line:

 $scope.isConfigured = $scope.model.config && $scope.model.config.items && _.keys($scope.model.config.items).length > 0;

I suspect its something about not being able to get the approved color values from Umbraco but not sure where this would go.

In my package.manifest the only thing I'm doing is referencing the colorpicker.controller.js file

Thanks in advance