ngWeekdaySelector.js

angular.module('ng-weekday-selector', [])
  .directive("ngWeekdaySelector", function() {
    "use strict";

    var const_days = [{
      id: 0,
      name: "SUN",
      isSelected: false
    }, {
      id: 1,
      name: "MON",
      isSelected: false
    }, {
      id: 2,
      name: "TUE",
      isSelected: false
    }, {
      id: 3,
      name: "WED",
      isSelected: false
    }, {
      id: 4,
      name: "THU",
      isSelected: false
    }, {
      id: 5,
      name: "FRI",
      isSelected: false
    }, {
      id: 6,
      name: "SAT",
      isSelected: false
    }];

    var template = "<div class='days-container' ng-class='{\"disabled\": ngDisabled===true}'>" +
      "<div class='day-circle day-0' ng-class='{\"is-selected\": ngModel[(0 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((0 + weekStartsIndex)%7)'>{{ngModel[(0 + weekStartsIndex)%7].name}}</div>" +
      "<div class='day-circle day-1' ng-class='{\"is-selected\": ngModel[(1 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((1 + weekStartsIndex)%7)'>{{ngModel[(1 + weekStartsIndex)%7].name}}</div>" +
      "<div class='day-circle day-2' ng-class='{\"is-selected\": ngModel[(2 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((2 + weekStartsIndex)%7)'>{{ngModel[(2 + weekStartsIndex)%7].name}}</div>" +
      "<div class='day-circle day-3' ng-class='{\"is-selected\": ngModel[(3 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((3 + weekStartsIndex)%7)'>{{ngModel[(3 + weekStartsIndex)%7].name}}</div>" +
      "<div class='day-circle day-4' ng-class='{\"is-selected\": ngModel[(4 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((4 + weekStartsIndex)%7)'>{{ngModel[(4 + weekStartsIndex)%7].name}}</div>" +
      "<div class='day-circle day-5' ng-class='{\"is-selected\": ngModel[(5 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((5 + weekStartsIndex)%7)'>{{ngModel[(5 + weekStartsIndex)%7].name}}</div>" +
      "<div class='day-circle day-6' ng-class='{\"is-selected\": ngModel[(6 + weekStartsIndex)%7].isSelected}' ng-click='onDayClicked((6 + weekStartsIndex)%7)'>{{ngModel[(6 + weekStartsIndex)%7].name}}</div>" +
      "</div>";

    var link = function(scope) {
      var init = function(){
        if (!scope.weekStartsIndex){
          scope.weekStartsIndex = 0;
        }
        if (scope.ngDisabled === undefined || scope.ngDisabled === null){
          scope.ngDisabled = false;
        }
        initDaysSelected();
        initControl();
      };

      var initDaysSelected = function(){
        if (!scope.ngModel){
          scope.ngModel = [];
          angular.extend(scope.ngModel, const_days);
        }
      };

      var initControl = function(){
        if (scope.control){
          scope.control.toggleDayByIndex = function(dayIndex){
            if (scope.ngModel){
              scope.ngModel[dayIndex].isSelected = !scope.ngModel[dayIndex].isSelected;
            }else{
              console.log("Error, no model to toggle for!");
            }
          };
        }
      };

      scope.onDayClicked = function(dayIndex){
        if (!scope.ngDisabled) {
          console.log('day clicked: ' + scope.ngModel[dayIndex].name);
          scope.ngModel[dayIndex].isSelected = !scope.ngModel[dayIndex].isSelected;
          if (typeof scope.ngChange === "function") {
            scope.ngChange({newValue: {index: dayIndex, item: scope.ngModel[dayIndex]}});
          }
        }
      };

      init();
    };

    return {
      restrict: 'AE',
      scope: {
        ngModel: '=?',
        ngChange: '&',
        weekStartsIndex: '@?',
        ngDisabled: '=?',
        control: '=?'
      },
      link: link,
      template: template
    };
  });