por que sale 0 cero de tamaño en altura del div con id="box2"?
el tamano deberia ser la sumatoria de todos los items del json
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
console.log(box1.getBoundingClientRect().height);
console.log(box2.getBoundingClientRect().height);
$scope.records = [{
id: 1,
name: "mia"
}, {
id: 2,
name: "juan"
},{
id: 2,
name: "juan"
},{
id: 2,
name: "juan"
}];
});
#box1 {
width: 150px;
height: 25px;
}
#box2{
height: 50px;
display: block;
}
.visible{
overflow:scroll;
}
.ocultar{
overflow-y: hidden;
}
#cd{
height:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div id="box1">
<div id="box2">
<div id="cd" ng-repeat="x in records">
<div>{{x.id}}.- {{x.name}}</div>
</div>
</div>
</div>
</div>