Error: $compile:ctreq Missing Required Controller

Question

I have the following code.

In my html:

<md-list-item ng-repeat="sidenavelem in sidenavelements">
    <md-button layout="row" layout-align="start center" ng-click="SelectSidevanElements(sidenavelem); Close()" ng-bind-html="sidenavelem.name | to_trusted">a</md-button>
</md-list-item>

<md-content layout="column" flex class="md-padding">
    <div dynamic="sidenavelement.template"></div>
</md-content>

This is the directive:

var app = angular.module('StarterApp', ['ngMaterial', 'mdDataTable']);

app.directive('dynamic', function ($compile) {
return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
        scope.$watch(attrs.dynamic, function(html) {
            ele.html(html);
            $compile(ele.contents())(scope);
        });
    }
};
});

And, inside my controller

$scope.sidenavelement = $scope.sidenavelements[0];
$scope.SelectSidevanElements = function(sidelem) {
    $scope.sidenavelement = sidelem;
};

$scope.sidenavelements = [
{
    name: "Home",
    template: 
    '<div layout-padding flex>' +
    '   <md-data-table table-card="{visible: tableCardIsEnabled}">' +
    '       <md-data-table-header-row>' +
    '           <md-data-table-column align-rule="left">Money</md-data-table-column>' +
    '       </md-data-table-header-row>' +
    '       <md-data-table-row ng-repeat="record in records">' +
    '           <md-data-table-cell>{{record.money}}€</md-data-table-cell>' +
    '       </md-data-table-row>' +
    '   </md-data-table>' +
    '</div>'
},
{
    name: similar above,
    template: similar above
},
{
    name: similar above,
    template: similar
}
];

My program works as follow. When I click on the md-button inside md-list-item, the md-content changes with the content of sidenavelement.template

I have a simple function that add elements to the array records (which values are display in the "home template".

If i go to the a "template" different from "home" and i try to insert a value inside the records array, all works but I have the following error:

Error link!

Can someone help me?

Thanks!

EDIT: Cloud9 IDE link

Answer 1

You have problem in your directive, the i.e. require: '...' is missing.
Read more here about your problem, or to learn more about how to create custom directives read this.