Question: I am new to angular and here is the problem I am having. I have created a directive:

```
angular
.module('app.simpledirective')
.directive('simpledirective', function() {
    return {
        templateUrl: 'app/simpledirective/sample.html',
        bindToController: true,
        controller: SampleController
    };
});

```

function SampleController($scope) { }

//Here is the sample.html for this directive

```
<div class="outer">
    <div class="inner1">Show</div>
    <div class="inner2">Don't Show</div>
</div>

```

The problem I am having is, if I call this directive in 2 different places ie:

```
<div>
    <simpledirective></simpledirective>        
</div>

```

How can I make it that in one place it displays both classes, "inner1" and "inner2", but in the second place, it only shows class "inner1", ie "inner2" is hidden.

Thanks for any help!

Answer: 
You can change your directive to accept attributes from your directive definition and use them to show/hide a particular div in your `sample.html` like below.

```
<div class="outer">
    <div ng-show="inner1" class="inner1">Show</div>
    <div ng-show="inner2" class="inner2">Don't Show</div>
</div>

```

**app.js**

```
angular
.module('app.simpledirective',[])
.directive('simpledirective', function() {
    return {
        scope : {
          inner1 : '@',
          inner2 : '@'
        },
        templateUrl: 'app/simpledirective/sample.html',
        bindToController: true,
        controller: SampleController
    };
});

```

**main.html**

```
<div>
    <simpledirective inner1="true"></simpledirective>        
</div>

```

If you want only `inner1` to display, pass some value in directive and leave `inner2`. Note that if you pass `inner2="false"`, even that is considered as a valid value and your 2nd div will be displayed. Just add the attribute value only for the div you wish to show.

Here's a sample [pen](http://codepen.io/anon/pen/QjdYby?editors=101) illustrating the above idea :)
You can also do this by adding class on parent class like  

**Place 1.**

```
<div>
    <simpledirective></simpledirective>        
</div>

```

**Place 2.**

```
<div class="inner2Hide">
    <simpledirective></simpledirective>        
</div>

```

**css:**

```
.inner2Hide .inner2 {
  display:none
}

```