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

i want implement angular header , footer directives layout(index.html) page.

getting error: [$compile:tplrt] template directive 'header' must have 1 root element.

this index.html (requirejs included)

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

header.html:

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

header.js (directive)

angular.module('header', []) .directive('header', function () {     return {         restrict: 'a', //this menas used attribute , not element. don't creating custom html elements         replace: true,         //scope: {user: '='}, // 1 of cool things :). explained in post.         templateurl: base_url+"angular/js/directives/admin/header.html",          controller: ['$scope', '$filter', function ($scope, $filter) {              // behaviour goes here :)          }]      } }); 

when comment templateurl, error 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 no problem if not concept of header , footer directives.

this happens when header.html not have root element. change header.html code this:

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