title: Hide section if no option selected in angular ng-hide
body: <p>I have a two selection boxes. One that is populated depending on the selection of the first box.</p>
  
  <p>I wish to hide the second box if nothing is selected in the first.</p>
  
  <p>I have tried the following but cant seem to get the box to show once you select a option.</p>
  
  <p>so far the second selection box is hidden, I wish for it to un-hide once something has been selected in the first.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="text-center"&gt;
      &lt;h3 style=" color: blue;"&gt;What would you like to do&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;div ng-controller="dropDown"&gt;
          &lt;select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats"&gt;
              &lt;option value=""&gt;- Please Choose -&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;select ng-model="formData.format"
                  ng-options="format.id as format.name for format in formData.ProductAndFormat.format"
                  ng-hide="product.name == null"&gt;
              &lt;option value=""&gt;- Please Choose -&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
      &lt;div class="col-xs-6 col-xs-offset-3"&gt;
          &lt;a ui-sref="form.end" class="btn btn-block btn-info"&gt;
              Next Section &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('MyFirstAngularApp')
  
      .controller('dropDown', function ($scope) {
  
      $scope.productsandformats = [{
          "name": "product 1",
          "format": [{
              "name": "format 1",
              "id": "1"
          }, {
              "name": "format 2",
              "id": "2"
          }]
      }, {
          "name": "product 2",
          "format": [{
              "name": "format 3",
              "id": "3"
          },{
              "name": "format 2",
              "id": "2"
          },
              {
              "name": "format 4",
              "id": "4"
          }, {
              "name": "format 5",
              "id": "5"
          }]
      }];
  
      $scope.user = {productName: $scope.productsandformats[0], format: '1'};
  
      $scope.displayModalValue = function () {
          console.log($scope.user.productName);
      }
  
  })
  </code></pre>