Umbraco 7 - Custom Macro Parameter Editor - RTE - angularjs

Question

I hope this will help others too as there isn't a lot of documentation about this exactly.
I want to use a RTE (rich text editor) within a macro I've created to handle page sections.
I have successfully rendered the RTE within the macro. I can select my macroRte from the macro parameters panel. It even renders where I edit the values of my page section. I have attributed the alias of "macroRte" to the parameter.
However, it is not storing the values. Each time I press submit it is wiping the content.
I'm no Angular expert but i think that's the problem. Code below. Thank you.
View
<div ng-controller="CustomSectionEditController" class="umb-editor umb-rte">
<umb-editor model="macroRte">
<div ng-model="model.value">{{model.value}}</div>
</umb-editor>
Controller
angular.module("umbraco").controller("CustomSectionEditController", function ($scope) {
$scope.macroRte = {
label: 'bodyText',
description: 'Load some stuff here',
view: 'rte',
config: {
editor: {
toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "table", "umbembeddialog"],
stylesheets: ["rte"],
dimensions: { height: 400 },
valueType:"STRING"
}
}
};
});
Render
#inherits Umbraco.Web.Macros.PartialViewMacroPage
<div class="lh-text">
#Model.MacroParameters["macroRte"];
</div>
Any ideas? :)

Answer 1

using this, https://github.com/engern/Umbraco-custom-macro-parameters/tree/master/App_Plugins/MacroRichText - I was able to solve my problem.
The view needs to be changed to the following
<div ng-controller="CustomSectionEditController">
<ng-form>
<umb-editor model="macroRte"></umb-editor>
</ng-form>
</div>
The controller needed the following code (add under view
value: $scope.model.value,
and an additional scope control
$scope.$watch("macroRte.value", function (newValue, oldValue) {
$scope.model.value = newValue;
});
The controller now looks like this
angular.module("umbraco").controller("CustomSectionEditController", function ($scope) {
$scope.macroRte = {
label: 'bodyText',
description: 'Load some stuff here',
view: 'rte',
value: $scope.model.value,
config: {
editor: {
toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "table", "umbembeddialog"],
stylesheets: ["rte"],
dimensions: { height: 400 },
valueType:"STRING"
}
}
},
$scope.$watch("macroRte.value", function (newValue, oldValue) {
$scope.model.value = newValue;
});
});
I hope this help others.