Testing Directive and controller instances

A test to see how I can have data isolated to an instance when stored in a factory/service/provider

by Leona

HTML

<script src="https://code.angularjs.org/1.4.2/angular.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<div>
    <div my-selector mydata="1"></div>  
</div>
<div>
    <div my-selector mydata="2"></div>  
</div>

JavaScript

var app = angular.module('myApp',[]);

app.directive('mySelector', function () {
return { 
    scope: true,
    bindToController:  {
        mydata: '@mydata',     
        timePeriodOptions: '='
    },
    controllerAs: 'selCtrl',
    restrict: 'EA',
    template:'<select ng-model="timePeriodSelection" ng-options="timePeriodOption.name for timePeriodOption in selCtrl.timePeriodOptions"><option value="">Choose time period</option></select>',
	controller: 'selCtrl'
 };
});    
app.controller('selCtrl', function($scope, myService) {
    var selCtrl = this;    
    selCtrl.timePeriodOptions = [];
    if (angular.isString(selCtrl.mydata)){
        processData();
    }
    function processData(){
        var value = myService.getData(selCtrl.mydata);
        for (var a=0;a<value.length;a++){
            selCtrl.timePeriodOptions.push(value[a]);
        }
    };
});

app.factory('myService', function(dataModel1,dataModel2) {
return {
    getData: function(model){
        var _data = []        
        if (model === "1"){
            _data = dataModel1.getData();
        }else{
            _data = dataModel2.getData();
        }
        console.log('data ',_data);
        return _data
    }            
	}
});
app.factory('dataModel1', function() {
	var _data=[{"name":1,"value":1},{"name":2,"value":2},{"name":3,"value":3}];    
	return {
    	getData: function(){
	        return _data
	    }            
	}
});
app.factory('dataModel2', function() {
	var _data=[{"name":4,"value":4},{"name":5,"value":5},{"name":6,"value":6}];    
	return {
    	getData: function(){
        	return _data
    	}            
	}
});