I created a new custom section in my umbraco based on this article: http://www.enkelmedia.se/blogg/2013/11/22/custom-sections-in-umbraco-7-%E2%80%93-part-2-the-views.aspx

I'm trying to move angular controller to a separate file similar to this solution but I'm getting an error as in the subject:

Argument 'MyPluginEditController' is not a function, got undefined

I don't know angular.js so I am not very sure what I'm doing but I don't think at this stage it would be too difficult. Yet for some reason my app cannot find the controller.

So far I have myplugin.manifest:

{
    javascript: [
        '~/App_Plugins/MyPlugin/backoffice/myPluginTree/edit.controller.js',        
        '~/App_Plugins/MyPlugin/contact.resource.js'        
    ]
}

edit.html view:

<div ng-controller="MyPluginEditController">

    <umb-panel>
        <umb-header tabs="content.tabs">
            <div class="umb-headline-editor-wrapper span12 ng-scope">
                <h1 class="ng-binding">MyPlugin section {{id}}</h1>
            </div>
        </umb-header>

        <umb-tab-view>
            <umb-tab id="tab1" rel="svensson">

                <div class="umb-pane">
                    This is tab content for tab 1<br />
                    <p ng-show="EditMode()">
                        <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>
                    </p>
                </div>
            </umb-tab>

            <umb-tab id="tab2" rel="kalle">

                <div class="umb-pane">

                    This is tab content for tab 2
                </div>
            </umb-tab>

        </umb-tab-view>
    </umb-panel>

</div>

and edit.controller.js:

angular.module("umbraco").controller("MyPluginEditController",
    function ($scope, $routeParams, personResource, notificationsService, navigationService) {

        $scope.content = { tabs: [{ id: 1, label: "Tab One" }, { id: 2, label: "Tab Two" }] };

        $scope.EditMode = function () {
            return $routeParams.create == 'true';
        };

    });

The contact.resource just has this (which is not used yet):

angular.module("umbraco.resources")
    .factory("contactResource", function ($http) {
        return {
            getById: function () {
                return $http.get("MyPlugin/Contact/GetAll");
            }
        };
    });

In addition id in the header MyPlugin section {{id}} doesn't show up. I thought it would show up the menu item id? But the header shows just MyPlugin section

What am I doing wrong?