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**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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"
      }];
      

    });

<!-- language: lang-css -->

    #box1 {
         width: 150px;
         height: 25px;
    }

    #box2{
    height: 50px;
    display: block;
    }


    .visible{
    overflow:scroll;
    }

    .ocultar{
    overflow-y: hidden;
    }

    #cd{
    height:10px;
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->