AngularJS directive causes issue with page layout

I have downloaded ace admin

Now I try to use it in my AngularJS project. The problem comes when I use parts of the template and separate it into custom directives. I have tried to reduce the code as much as possible and isolate the problem I am trying to describe and I have made a plunker.

If you open page-content.html there is a



This directive causes the

<div class="main-content-inner">

to fall under it.

But when you copy the code from sidebar.html and replace the


directive with it you get the desired layout.

I have no idea how to deal with this behaviour.

Give this a Try


angular.module('myApp', [])

    .directive("pageContent", function () {
        return {
            templateUrl: "page-content.html",


    .directive("sidebar", function () {
        return {
            templateUrl: "sidebar.html",