Angular ng-options doesn show all elements <p>I am working in some app with AngularJS and I am using the <code>ng-options</code> directive, but I have one problem. When I select the <strong>"Provincia"</strong>, the <strong>"Cantón"</strong> select only shows the last element in the array. </p> <p>Anyone knows what is the problem?</p> <p>This is my HTML code:</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group"&gt; &lt;select class="form-control" ng-model="selected.provincia" ng-options="p.provincia for p in geografiaCR"&gt; &lt;option value="" disabled selected hidden&gt;Seleccione una provincia&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;select class="form-control" ng-model="selected.nombre" ng-options="n.nombre for n in selected.provincia.cantones"&gt; &lt;option value="" disabled selected hidden&gt;Seleccione un cantón&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>And this is the Angular code:</p> <pre class="lang-js prettyprint-override"><code>$scope.selected = {}; $scope.geografiaCR = [ { provincia: 'San José', cantones: [{nombre: 'San José',nombre: 'Escazú',nombre: 'Desamparados',nombre: 'Puriscal',nombre: 'Tarrazú', nombre: 'Aserrí',nombre: 'Mora',nombre: 'Goicochea',nombre: 'Santa Ana', nombre: 'Alajuelita', nombre: 'Acosta',nombre: 'Tibás',nombre: 'Moravia',nombre: 'Montes de Oca',nombre: 'Turrubares', nombre: 'Dota',nombre: 'Curridabat',nombre: 'Perez Zeledón', nombre: 'León Cortes'}] }, { provincia: 'Limón', cantones: [{nombre: 'Limón',nombre: 'Pocosí',nombre: 'Siquirres',nombre: 'Talamanca',nombre: 'Matina', nombre: 'Guácimo'}] } ]; </code></pre>