title: How to assign 'ng-style' directive value based on 'ng-repeat' count
body: <p>I have an Angularjs sample <a href="http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple" rel="nofollow noreferrer">snippet</a>. here using ng-repeat directive to display names in a table, I am planning to add ng-style directive to add vertical scroll bar to a table based on table row count. how can i make below code to work? </p>
  
  <p>Eg:  we need vertical scroll bar to a table only if the count of table rows is more than 4
  I tried like this</p>
  
  <pre><code>&lt;div ng-if= "names.length &gt; 4" ng-style="{'overflow-y': 'auto'}" &gt;
        &lt;table&gt;
          ---------
        &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help by correcting the code</p>
  
  <p>Here is sample code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;div ng-app="myApp" ng-controller="customersCtrl"&gt; 
  &lt;table&gt;
    &lt;tr ng-repeat="x in names"&gt;
      &lt;td&gt;{{ x.Name }}&lt;/td&gt;
      &lt;td&gt;{{ x.Country }}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;script&gt;
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://www.w3schools.com/angular/customers.php")
      .then(function (response) {$scope.names = response.data.records;});
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>