AngularJS directive causes issue with page layout

I have downloaded ace admin http://www.bootstraptemplates.net/ace-responsive-admin-template

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 https://plnkr.co/edit/4Xdk9dSlTWl4rWap7zav?p=info plunker.

If you open page-content.html there is a

<sidebar></sidebar> 

directive.

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

<sidebar></sidebar>

directive with it you get the desired layout.

I have no idea how to deal with this behaviour.

Give this a Try

app.js

angular.module('myApp', [])

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

        };
    })

    .directive("sidebar", function () {
        return {
            templateUrl: "sidebar.html",
            replace:true,
        };
    });