First of all: I'm very new to Umbraco backoffice extensions and AnguarJS.

What I have achieved, by following this series of articles, is to create a new section, show the content tree (left pane) and an angular form on the right. Here is the controller and view code:

edit.controller.js:

angular.module("umbraco").controller("XmlExport.XmlExportEditController",
function ($scope, $routeParams, xmlExportResource, notificationsService, navigationService) {

    $scope.loaded = false;

    if ($routeParams.id == -1) {
        $scope.node = {};
        $scope.loaded = true;
    }
    else {
        xmlExportResource.getById($routeParams.id).then(function (response) {
            $scope.node = response.data;
            $scope.loaded = true;
        });
    }

    $scope.exportFilename = "Havneguiden.xml";

    $scope.xmlExport = function (node, exportFilename) {
        xmlExportResource.xmlExport(node.Id, exportFilename).then(function (response) {
            $scope.node = response.data;
            $scope.contentForm.$dirty = false;
            navigationService.syncTree({ tree: 'xmlExportTree', path: [-1, -1], forceReload: true });
            notificationsService.success("Success", node.Name + " has been exported");
        });
    };

});

edit.html:

<form name="contentForm"
  ng-controller="XmlExport.XmlExportEditController"
  ng-show="loaded"
  ng-submit="xmlExport(node, exportFilename)"
  val-form-manager>
<umb-panel>
    <umb-header>
        <div class="span7">
            <h1>{{node.Name}}</h1>
        </div>
        <div class="span5">
            <div class="btn-toolbar pull-right umb-btn-toolbar">
                <umb-options-menu ng-show="currentNode"
                                  current-node="currentNode"
                                  current-section="{{currentSection}}">
                </umb-options-menu>
            </div>
        </div>
    </umb-header>
    <div class="umb-panel-body umb-scrollable row-fluid">
        <div class="tab-content form-horizontal" style="padding-bottom: 90px">
            <div class="umb-pane">

                <umb-control-group label="Type" description="Content type">
                    <div class="umb-editor umb-textstring">{{node.Template.Alias}}</div>
                </umb-control-group>

                <umb-control-group label="Filename" description="Export filename">
                    <input type="text" class="umb-editor umb-textstring" ng-model="exportFilename" required />
                </umb-control-group>

                <div class="umb-tab-buttons" detect-fold>
                    <div class="btn-group">
                        <a class="btn" ng-href="#/content/content/edit/{{node.Id}}">
                            Show
                        </a>
                    </div>
                    <div class="btn-group">
                        <button type="submit" data-hotkey="ctrl+s" class="btn btn-success">
                            Export
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</umb-panel>

The thing that is not working is passing the value of the < input ng-model="exportFilename" > back to the controller. As you can see, I'm trying to pass the value as a parameter to the ng-submit function "xmlExport", but this does not work, exportFilename is always undefined when entering the controller function. But, the other way is working fine: When initializing the $scope.exportFilename in the Controller, that value is shown in the < input> when entering the form.

I painfully aware that this problem is probably due to my lack of basic angular knowledge. However, I have spent most of the day on forums trying to figure it out, without any luck. While searching for an answer, I also got a feeling that it could be something special with Umbraco here, but I could be wrong.

So now, I'm hoping that some v7 backoffice guru here could help me out.