Шаблон для директивы weatherReport должен иметь ровно один корневой элемент. директивы / weatherReport.html

Привет, ребята, испытывающие проблемы с моим угловым погодным приложением "Шаблон для директивы" weatherReport "должен иметь ровно один корневой элемент. Директивы /weatherReport.html"

Это мой код app.js

// Directives

weatherApp.directive("weatherReport", function() {
   return {
       restrict: 'E',
       templateUrl: 'directives/weatherReport.html',
       replace: true,
       scope: {
           weatherDay: "=",
           convertToStandard: "&",
           convertToDate: "&",
           dateFormat: "@"
       }
   }
});

Это мой weatherReport.html

    <div class="panels panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">{{ convertToDate({ dt: weattherDay.dt }) | date: dateFormat }}</h3>
        </div>
        <div class="panel-body">
            Daytime temperature: {{ convertToStandard( { daytimeTemp: weatherDay.temp.day }) }}
        </div>
    </div>
</div>

полный app.js

   // Module

var weatherApp = angular.module ('weatherApp',['ngRoute', 'ngResource']);


weatherApp.config(function($routeProvider) {

    $routeProvider

    .when ('/' , {
        templateUrl: 'pages/home.html',
        controller: 'homeController'
    })

    .when ('/forecast' , {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })

    .when ('/forecast/:days' , {
        templateUrl: 'pages/forecast.html',
        controller: 'forecastController'
    })
});


//SERVICES

weatherApp.service('cityService', function(){

    this.city = "New York, NY";
});

//Controllers
weatherApp.controller('homeController', ['$scope' , 'cityService', function($scope , cityService){
    $scope.city = cityService.city;

    $scope.$watch('city', function(){
        cityService.city = $scope.city;
    });
}]);


weatherApp.controller('forecastController', ['$scope' ,'$resource','$routeParams', 'cityService', function($scope ,$resource,$routeParams, cityService){

    var apiID = "2de143494c0b295cca9337e1e96b00e0";
    $scope.city = cityService.city;

    $scope.days = $routeParams.days || '2';

    $scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", {
        callback:"JSON_CALLBACK"},{ get:{ method:"JSONP"}});

    $scope.weatherResultDaily = $scope.weatherAPI.get({ q: $scope.city, cnt:$scope.days, appid: apiID });

    $scope.convertToCalcuis = function (degK) {


        return Math.round((1.8 * (degK - 273.15)));
    };

    $scope.convertToDate = function (dt) {

            //Date format came in millisecounds
        return new Date(dt * 1000);
    };

}]);


// Directives

weatherApp.directive("weatherReport", function() {
   return {
       restrict: 'E',
       templateUrl: 'directives/weatherReport.html',
       replace: true,
       scope: {
           weatherDay: "=",
           convertToStandard: "&",
           convertToDate: "&",
           dateFormat: "@"
       }
   }
});

заранее спасибо