angularjs - How to set the height of the body equals to the length of an array in Angular -

i have user list, can grow dynamically if add new user. want whole body length of user list.

in factory determine length of array , need know how access/translate view in angular. this:

<div class="mainwrapper" id="mainview" style="width: {{gridsizeng.x * 122}}px; height: {{gridsizeng.y *  length of user list }}">  ...  </div> 

part of factory code:

userservice.getusers = function () {         $http.get("api/users") //your api url goes here             .success(function(datafromserver){                 //console.log('logging datadromserver ', datafromserver);                 //userservice.userlist = [];                  /*datafromserver.foreach(function(user, index, arr) {                      userservice.userlist.push(user);                  })*/                 var initials = function(name){                     var d1 = name.split(" ")[0].charat(0).touppercase();                     var d2;                     try                     {                         d2 = name.split(" ")[1].charat(0).touppercase();                     }                     catch(e){                         d2 = "";                     }                      return  d1 + d2;                     console.log('logging initials ', d1 + d2);                 }                      (var = 0; < datafromserver.length; i++) {                     userservice.userlist[i] = datafromserver[i];                      userservice.userlist[i].initials = initials(userservice.userlist[i].name)                                     };                  console.log('#### logging lenght of userlist ' , userservice.userlist.length );                  //here should update userslist server this:                 //userservice.userslist = datafromserver;                  return datafromserver;             })             .error(function(errorfromserver){             //something went wrong, process error here                 console.log("error in getting users server");             })         };        return userservice;     }) 

as can see image, height of body not dynamic

imo best approach here use css advantage , have size grow in accordance amount of elements have. means (idealy) don't need set height , width property in css, need set max-height , max-width properties, should list grow more body.

if want control height , width using js use ng-style instead of style, keep in mind ng-style considered last resort in controlling styles, 1 should ideally use ng-class if possible.

with ng-style able use scope variables control height , width.

also try use this, using existing html code:

<div class="mainwrapper" id="mainview" style="width: {{gridsizeng.x}} * 122 + 'px'; height: {{gridsizeng.y}} * {{the length of user list }} + 'px'">  ...  </div> 

not sure if above code work, ng-style will.