В вашей разметке есть опечатка, но я не уверен, что это проблема, потому что вы не поделились другим кодом:
<div ng-controller="app-post">
<app-post"></app-post>
\
what's that double quote doing here?
</div>
В любом случае, вот простой фрагмент, который я написал для демонстрациикак можно добиться макета, который вы пытаетесь реализовать:
angular.module('app', [])
.controller('AppController', AppController)
.controller('AppGetController', AppGetController)
.controller('AppPostController', AppPostController)
.controller('AppUpdateController', AppUpdateController)
.directive('appGet', appGetDirective)
.directive('appPost', appPostDirective)
.directive('appUpdate', appUpdateDirective);
function AppController() {
this.hello = 'Hello from AppController!';
}
function AppGetController() {
this.hello = 'Hello from AppGetController!';
}
function AppPostController() {
this.hello = 'Hello from AppPostController!';
}
function AppUpdateController() {
this.hello = 'Hello from AppUpdateController!';
}
function appGetDirective() {
return {
template: '<h3>Hello from appGet directive!</h3>'
};
}
function appPostDirective() {
return {
template: '<h3>Hello from appPost directive!</h3>'
};
}
function appUpdateDirective() {
return {
template: '<h3>Hello from appUpdate directive!</h3>'
};
}
html, body { margin: 0; padding: 0; }
body { background: #f3d250; padding: 10px; }
h1, h2, h3 { margin: 0; padding: 10px; }
h3 { background: #5da2d5; }
div { background: #f78888; margin: 10px; padding: 0 10px 10px; }
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppController as app">
<h1>{{app.hello}}</h1>
<div ng-controller="AppGetController as appGet">
<h2>{{appGet.hello}}</h2>
<app-get></app-get>
</div>
<div ng-controller="AppPostController as appPost">
<h2>{{appPost.hello}}</h2>
<app-post></app-post>
</div>
<div ng-controller="AppUpdateController as appUpdate">
<h2>{{appUpdate.hello}}</h2>
<app-update></app-update>
</div>
</body>
</html>