Help defining Controller with Custom Dashboard and UserModule

[mfitzgerald_wavetech]

I am attempting to add an Angular Controller to provide custom Dashboard control. I am having issues with getting the Controller registered properly and am currently receiving the following error:

Error: [ng:areq] Argument 'myDemoController' is not a function, got Object
https://errors.angularjs.org/1.8.3/ng/areq?p0=myDemoController&p1=not%20a%20function%2C%20got%20Object
    at mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:837
    at ke (mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:11241)
    at je (mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:11358)
    at mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:60348
    at mangoUi~ngMango.js?v=e40cb7ee45260acf61ab:50:1715
    at mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:50964
    at ie (mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:51053)
    at mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:44909
    at ie (mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:52002)
    at mangoUi~ngMango~ngMangoServices.js?v=50b41cf5dc12c51d5d91:336:44909

I have a userModule.js (yes, the myDashboardHelpers.js should be in a better folder):

define((require) =>
  angular
    .module("userModule", ["maUiApp"])
    .component("emsTrend", require("./components/trend/trend.js"))
    .directive('svgStyle', require('./directives/svgStyle.js'))
    .component("view", require("./components/view/view.js"))
    .controller("myDemoController", require("./directives/myDashboardHelpers.js"))
    );

A myDashboardHelpers.js of:

define(['angular', 'require'], function(angular, require) {
    'use strict';

    var myDashboardModule = angular.module('myDashboardModule', ['maUiApp']);

    myDashboardModule.controller('myDemoController', ['$scope', function($scope) {
        $scope.demoMode = 'STOPPED';
    
        $scope.stepDemo = function() {
            $scope.demoMode = 'STEP';
        };
    
        $scope.runDemo = function() {
            $scope.demoMode = 'RUN';
        };
    }]);

    return myDashboardModule;
});

And a Dashboard Markup of:

<md-card flex="" layout="row" layout-wrap="" layout-align="space-between" ng-controller="myDemoController">
            <md-card-content layout="column">
                <ma-button id="9d571d5d-32ab-4949-9ddc-891f68f4b28b" raised="true" label="STEP" onclick="stepDemo()"></ma-button>
                <ma-button id="f3e1e931-62e2-4ddd-93d3-05a2787c0f6c" raised="true" label="RUN" onclick="runDemo()"></ma-button>
            </md-card-content>
            <md-card-content layout="column">
                <p>MODE:{{demoMode}}</p>
            </md-card-content>
        </md-card>

I have been searching for the error in my ways on the forum and web with no luck. I am running Mango Automation core Version 5.2.1. Thanks in advance for any guidance on a solution / best practice ;-)

[MattFox]

@mfitzgerald_wavetech

var myDashboardModule = angular.module('myDashboardModule', ['maUiApp']);

    myDashboardModule.controller(

Looks like you're making the same call twice to me
Just wrap your controller in a function and return the function itself.

Check out the component I wrote in the forum for 'faceplate'. Despite it being a component, you'd do it the same way for a controller.

Hope that gives you something to work with

Fox

[mfitzgerald_wavetech]

@MattFox Thanks, but I am feeling dumb here. I tried to find the 'faceplate' component example and could not find it on the forum....

[MattFox]

@mfitzgerald_wavetech sorry, face plate
https://forum.mango-os.com/post/19718

[mfitzgerald_wavetech]

@MattFox Thanks! Looks comprehensive. I will work thru the example. Greatly Appreciated!!!