Is adding CSS to template via <style> the right approach?How should I structure the application?Plunker link to the codeapp = angular.module(app,[]);app.controller('main', ['$scope', function($scope){ $scope.name=here; $scope.date = new Date('2/1/2016');}])app.directive('cal', function(){ var directive = {}; directive.restrict = 'E'; directive.templateUrl = template.html; directive.scope = {  date : =date }; directive.controller = function($scope){  $scope.name = 'the name';  var d = $scope.date;  var m = (d.getMonth()+2)%12;  if(m==1){   d =  new Date(m+'/1/'+(d.getFullYear()+1));  }  d = new Date(m+'/1/'+d.getFullYear());  d.setDate(d.getDate()-1);  d = d.getDate();  $scope.days = d;  d = $scope.date;  $scope.d = d.getDay(); } return directive;});<!--the template that the directive uses--><style type=text/css> .calendar .element{  text-align: center;  border: 1px solid black;  display: inline-block;  width: 30px; } .calendar .row{  text-align: center; } .calendar{  display: inline-block; }</style><div class=calendar ng-init=m=['jan','feb','mar','apr','may','jun','july','aug','sep','oct','nov','dec']> <div class=row>  <span>{{m[date.getMonth()] | uppercase}} {{date.getFullYear()}}</span> </div> <div class=row>  <div class=element ng-repeat=i in [1,2,3,4,5,6,7]>   <span ng-if=i<=d>{{'-'}}</span>   <span ng-if=i>d>{{i-d}}</span>  </div> </div> <div class=row>  <div class=element ng-repeat=i in [8,9,10,11,12,13,14]>   <span ng-if=i<=d>{{' '}}</span>   <span ng-if=i>d>{{i-d}}</span>  </div> </div> <div class=row>  <div class=element ng-repeat=i in [15,16,17,18,19,20,21]>   <span ng-if=i<=d>{{'-'}}</span>   <span ng-if=i>d>{{i-d}}</span>  </div> </div> <div class=row>  <div class=element ng-repeat=i in [22,23,24,25,26,27,28]>   <span ng-if=i<=d>{{'-'}}</span>   <span ng-if=i>d>{{k=(i-d)}}</span>  </div> </div> <div class=row ng-if=(29-d)<days>  <div class=element ng-repeat=i in [29,30,31,32,33,34,35]>   <span ng-if=(i-d)>days>{{'-'}}</span>   <span ng-if=(i-d)<=days>{{k=(i-d)}}</span>  </div> </div> <div class=row ng-if=(35-d)<days>  <div class=element ng-repeat=i in [36,37,38,39,40,41,42]>   <span ng-if=(i-d)>days>{{'-'}}</span>   <span ng-if=(i-d)<=days>{{i-d}}</span>  </div> </div></div>
AngularJS calendar directive
javascript;beginner;datetime;angular.js