Question: I've something like below. I am binding countries to a dropdown. 

On dropdown change i've to display different views.

```
 $scope.countries = [{id : 1, name : 'USA'}, {id : 2, name : 'India'}, {id: 3, name :'MIGHTY USSR'}];

 <select class="form-control" ng-model="selectedCountry" ng-options="country as country.name for country in countries">
    <option value="">Select Country</option>
 </select>

```

-

```
<div class="animate-switch-container" ng-switch on="selectedCountry.name">
<div class="animate-switch" ng-switch-when="USA">
      This Text is showing

      <div ng-include="'partials/USA.html'"></div>       -- Not Working
</div>

<div class="animate-switch" ng-switch-when="India">
     <div ng-include="'partials/'+ selectedCountry.name + '.html'"></div>       -- I tried this as well
</div>

<div class="animate-switch" ng-switch-default>
     Other Country
</div>

```

I also tried with `<div ng-include="'partials/USA.html'"></div>` & `<div ng-include src="'partials/USA.html'"></div>`.

My app folder looks like below

```
app
    views
        partials
           USA.html
           India.html
    dashboard.html
Index

```

Any solution please?

Answer: 
You should not include html page direct into `ng-include`

Bind you html page in controller

use like this :

**MarkUp**

```
<div ng-include="usaPage"></div>

```

**JS**

```
$scope.usaPage = "partials/USA.html";

```

**For selected Country :**

**MarkUp**

```
<div ng-include="SelectedCountryPage"></div>

```

**JS**

```
// in your selection event like ng-click
$scope.SelectedCountryPage = "partials/" + $scope.selectedCountry.name + ".html";

```

**Updates :**

Here is the working [Plunker](http://plnkr.co/edit/tqPPWZRHdMbLgFqRU2gC?p=preview)
The problem is your `{{}}` (as well as a `"`):

```
'partials/'+{{selectedCountry.name}}+"'.html'

```

The ng-include doesn't want that. Instead do:

```
ng-include="'partials/'+ selectedCountry.name + '.html'"

```