AngularJS ng-include

ng-include calendar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="Ctrl">
  <hr/>
  <table class="table-bordered">
    <tr>
      <td>Doodle Pampa</td>
      <td>Lundi</td>
      <td>Mardi</td>
    </tr>
    <tr>
      <td>9:00</td>
      <td>
        <div ng-repeat="m in members" ng-include="m.template" style="display: inline">
          a
        </div>
        </td>
        <td>
          <div ng-repeat="t in templates" ng-include="t.url" style="display: inline">

          </div>
        
        </td>
    </tr>
    <tr>
      <td>10:00</td>
      <td>
        <div ng-repeat="m in members" ng-init="CColor = m.color" ng-include="m.template" style="display: inline">

        </div>
        </td>
        <td>
          <div ng-repeat="t in templates" ng-include="t.url" style="display: inline">

          </div>
        </td>
    </tr>
  </table>
</div>





<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
  <div class="square" style="$parent.CColor"> </div>
</script>

<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
  <div class="square" style="CColor"> </div>
</script>

CSS

.red {
  color: red;
}

.square {
  width: 20px;
  height: 20px;
  background: white;
  border: solid 1px;
  float: left;
  margin-right: 4px;
  margin-left: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

JavaScript

function Ctrl($scope) {
  $scope.templates = [{
    name: 'template1.html',
    url: 'template1.html'
  }, {
    name: 'template2.html',
    url: 'template2.html'
  }];
  $scope.template = $scope.templates[0];

  $scope.myFunction = function() {
    $scope.color = 'red';
  };

  $scope.members = [
  { color:"color:blue", template:"template2.html"},
  { color:"blue", template:"template1.html"},
  { color:"green", template:"template1.html"}
  ];
}

angular.module('customdirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.color = blue;
}])
.directive('mydirective', function() {
  return {
    template: 'ABCDEFG'
  };
});