Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element

I want to implement angular header and footer directives for layout(index.html) page.

getting Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element.

This is index.html (requirejs included)

<div>   
   <div header ></div>
    <div>main content here{{1+2}} </div>
    <div footer></div>
</div>

header.html:

<!--- angular header-->
<div>
    some stuff
</div>
<div>
    some other stuff
</div>
<!--- angular header-->

header.js (directive)

angular.module('header', [])
.directive('header', function () {
    return {
        restrict: 'A', //This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
        replace: true,
        //scope: {user: '='}, // This is one of the cool things :). Will be explained in post.
        templateUrl: base_url+"angular/js/directives/admin/header.html",
         controller: ['$scope', '$filter', function ($scope, $filter) { 
            // Your behaviour goes here :) 
        }] 
    }
});

When I comment to templateUrl, Error get removed.

app.js

var base_url="http://localhost/angular_layout/";
define(['angularAMD','header', 'ngRoute', ], function (angularAMD) {
var app = angular.module('angularapp', ['header','ngRoute' ]);  
app.config(['$routeProvider', function($routeProvider){
/* *************** routes *************** */
............

main.js

//var base_url="http://localhost/ums/angular/js";
require.config({ 
baseUrl: "http://localhost/angular_layout/angular/js",
    paths: {
        'header': 'directives/admin/header',
        'footer': 'directives/admin/footer',
        'angular': 'lib/angular.min',
        'ngRoute': 'lib/angular-route.min',
        ..........

Note: there is no problem if not the concept of this header and footer directives.