controller bindings

  CardDirective.$inject = ['VicStripeService', 'vicPayments'];
  function CardDirective(VicStripeService, vicPayments){
    return {
      restrict: 'E',
      scope: {
        card: '='
      },
      templateUrl: function(elem, attrs) {
        return attrs.template || 'victor/stripeForm.html';
      },
      controllerAs: 'vm',
      bindToController: true,
      controller: function($scope) {
      	
      	var vm = this;
      	vm.paymentsService = vicPayments;
        vm.cardTypeClass = 'vic-card-type-unknown';        

        $scope.$watch('card.number', function(){
          vm.cardTypeClass = 'vic-card-type-' + VicStripeService.getCardType(vm.card.number).toLowerCase();
          vm.card.cardType = VicStripeService.getCardType(vm.card.number).toLowerCase();
        });

      }
    
    };
  }

  templateCache.$inject = ['$templateCache'];
  function templateCache($templateCache) {
    var tpl = [ //<troll>JSX</troll>
      '<div>',
      '<section id="form-placeholder"></section>',
      '<div class="row" ng-init="card = card || {}">',
      '<div class="form-group col-xs-2">',
      '<span ng-class="{{vm.cardTypeClass}}"></span>',
      '</div>',
     ];
	}