angularjs - Multiple directives [arValidations, datepickerPopup] asking for new/isolated scope on -

i got following error when trying combine custom directive datepicker:

multiple directives [arvalidations, datepickerpopup] asking new/isolated scope on... 

so guess need remove isolated scope, problem don't know how. here directive:

app.directive('arvalidations', [ 'basevalidator', '$injector', function(basevalidator, $injector){   return {     restrict: 'a',     scope: { arvalidations: '@?' },     require: '?ngmodel',     link: function(scope, element, attrs, ngmodel){        scope.validations = json.parse(scope.arvalidations);       scope.validator = $injector.get(scope.validations.validator);       scope.pristine = true;        scope.basevalidator = basevalidator;       scope.$watch(function(){ return ngmodel.$modelvalue }, function (attr) {          var label = scope.validations["attribute"];         var types = scope.validator.attributes[label].types;         var validated = scope.basevalidator.validatevalue(types, attr);          scope.validator.attributes[label].valid = validated === true && scope.pristine === false;         scope.validator.allvalid = scope.basevalidator.updateallvalidations(scope.validator.attributes);          scope.pristine = false;          if(scope.validator.attributes[label].valid){           element.removeclass('valid-input');           element.addclass('valid-input');         } else{           element.removeclass('valid-input');         }       });     }   } }]); 

the main issue injecting different service in each instance of directive. suggestions?

edit: said several times in comments obtaining arvalidations attribute using attrs instead of isolating scope not provide same functionality because several instances of same directive can created within same scope overwrites content of scope.validator.

the solution separate 2 directives several elements preserve scope isolation. here homework today:

directive:

app.directive('validateddatepicker',  function(){   return {     templateurl: 'directives/validated_datepicker.html',     scope: { modelinstance: '=validateddatepicker', modelattribute: '@?', placeholder: '@?', maxdate: '=?' },     controller: ['$scope', 'basevalidator', '$injector', function($scope, basevalidator, $injector){       $scope.cssclass = { 'valid-input':  false };       $scope.validator = $injector.get($scope.modelinstance.$validator);       $scope.pristine = true;        $scope.basevalidator = basevalidator;       $scope.calendardisplay = false;        $scope.opendate = function(e){         e.preventdefault();         e.stoppropagation();         $scope.calendardisplay = true;       };        $scope.$watch(function(){ return $scope.modelinstance[$scope.modelattribute]; }, function (attr) {          var label = $scope.modelattribute;         var types = $scope.validator.attributes[label].types;          var validated = $scope.basevalidator.validatevalue(types, attr);          $scope.validator.attributes[label].valid = validated === true && $scope.pristine === false;         $scope.validator.allvalid = $scope.basevalidator.updateallvalidations($scope.validator.attributes);          $scope.pristine = false;          if($scope.validator.attributes[label].valid){           $scope.cssclass = { 'valid-input':  true };          } else{           $scope.cssclass = { 'valid-input':  false };         }       });     }]   } }); 

template:

<input placeholder="{{placeholder}}" ng-class="cssclass" type="text" show-button-bar="false" class="form-control required-input" datepicker-popup="dd-mm-yyyy" data-ng-model="modelinstance[modelattribute]" max-date="modelinstance[maxdate]" is-open="calendardisplay" close-text="close"/> <div class="input-group-addon" data-ng-click="opendate($event)"><i class="fa fa-calendar"></i></div> 

edit 2: completeness, scope: true give same error scope: {}.

if arvalidations supposed live other directives on same elements (and suppose case), should not create isolated scope, , instead share same scope these other directives.

so want remove line scope: { arvalidations: '@?' }

however need implement @ binding manually regular way, adding, in link function:

attrs.$observe('arvalidations', function(value) {   scope.arvalidations = value; }); 

this way everytime {{}} interpolated binding updated, scope updated.

update direcitve have own scope, still inherited , not isolated, need add scope: true directive:

restrict: 'a', scope: true, require: '?ngmodel', link: ....