I am trying to improve multiple conditions using ng-show and ng-hide using directives, here is my code

**html code**

```
 <my-directive controls="a,b,c"></my-directive>

```

**js code**

```
.directive('myDirective',function(){
  return{
    restrict:'E',
    templateUrl:"parentHtml.html",
    link:function(scope,elem,attr){
      var options = attr.controls;
      if(options=="a,b,c"){
        scope.showMeAll=true;
      }else if(options=="a"){
        scope.showmeA=true;
      }else if(options=="b"){
        scope.showmeB=true;
      }else if(options=="c"){
        scope.showmeC=true;
      }
    }
  }
}).directive('subDirective',function(){
  return{
    restrict:'E',
    template:"<h2>aapple</h2>",
    link:function(scope,elem,attr){

    }
  }
}).directive('subDirective1',function(){
  return{
    restrict:'E',
    template:"<h2>BBatt</h2>",
    link:function(scope,elem,attr){

    }
  }
}).directive('subDirective2',function(){
  return{
    restrict:'E',
    template:"<h2>CCat</h2>",
    link:function(scope,elem,attr){

    }
  }
});

```

**here is my parentHtml.html code**

```
<div class="row">
  <div ng-show="showMeAll">
    <sub-directive></sub-directive>
    </div>
   <div ng-show="showMeB">
    <sub-directive1></sub-directive1>
    </div>
    <div ng-show="showMeC">
    <sub-directive2></sub-directive2>
    </div>
</div>

```

My problem is when I give all the three "a,b,c" to the directive attribute then in "parentHtml" all the three div's have to show, if I give only two i.e "a,b" then in parentHtml only two div's have to show i.e "apple" and "bat" and also if give only one string i.e "c" then in parentHtml only "cat" div have to show, in a simple way if what the alphabet I give to the directive attribute thet div have to show. Here is my <http://plnkr.co/edit/6gAyAi63Ni4Z7l0DP5qm?p=preview>. 
 Please solve my question in a simple way. 

Thanks In Advance