El problema en tu ejemplo es que el `div` con `id="new"` es el que tiene la directiva `ng-repeat`, esto provoca que se creen `n` elementos con `id="new"`, con `JS` buscas el elemento por `id` (**pero siempre obtienes el primero**) y es por esto que siempres obtienes el mismo resultado.

##Solución simple:

Si el `div` con `id="new"` es el que necesitas que contenga los elementos creados con `ng-repeat`, entonces podrías mover dicha directiva a un `span` hijo de éste.

###Ejemplo:

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

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

    var app = angular.module("myApp", []);
    app.controller("myCtrl", ['$scope', '$timeout', function($scope, $timeout) {
      $scope.records = [
        {id: 1, name: "maria"}, 
        {id: 2, name: "juan"},
        {id: 3, name: "antonio"},
        {id: 4, name: "fernando"},
        {id: 5, name: "josé"},
        {id: 6, name: "julio"},
        {id: 7, name: "marisel"},
        {id: 8, name: "julia"},
        {id: 9, name: "rosario"},
        {id: 10, name: "dolores"},
        {id: 11, name: "maria"}, 
        {id: 12, name: "juan"},
        {id: 13, name: "antonio"},
        {id: 14, name: "fernando"},
        {id: 15, name: "josé"}
      ];

      $timeout(function() {
        var s = document.getElementById('new');
        console.log(s.offsetWidth);
      });
    }]);

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

    #new {
      display: inline-block;
      white-space: nowrap;
      clear: both;
    }

    #new>span {
      margin-right: 5px;
    }

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

    <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="new">
          <span ng-repeat="x in records">{{x.id}}.- {{x.name}}</span>
        </div>
      </div>
    </div>

<!-- end snippet -->

---

##Solución avanzada:

Para esperar hasta que realmente se hayan renderizado todos los elementos podrías crear una directiva (`afterRender`) para obtener el ancho.

###Ejemplo:


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

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

    var app = angular.module("myApp", []);
    app.directive('afterRender', ['$timeout', function($timeout) {
      return {
        restrict: 'A',
        link: function($scope) {
          $timeout($scope.afterRender, 0); //Llamamos al metodo del scope
        }
      };
    }]);
    app.controller("myCtrl", ['$scope', function($scope) {
      $scope.records = [
        {id: 1, name: "maria"}, 
        {id: 2, name: "juan"},
        {id: 3, name: "antonio"},
        {id: 4, name: "fernando"},
        {id: 5, name: "josé"},
        {id: 6, name: "julio"},
        {id: 7, name: "marisel"},
        {id: 8, name: "julia"},
        {id: 9, name: "rosario"},
        {id: 10, name: "dolores"},
        {id: 11, name: "maria"}, 
        {id: 12, name: "juan"},
        {id: 13, name: "antonio"},
        {id: 14, name: "fernando"},
        {id: 15, name: "josé"}
      ];

      $scope.afterRender = function() {
        var s = document.getElementById('new');
        console.log(s.offsetWidth);
      };
    }]);

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

    #new {
      display: inline-block;
      white-space: nowrap;
      clear: both;
    }

    #new>span {
      margin-right: 5px;
    }

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

    <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 after-render id="new">
          <span ng-repeat="x in records">{{x.id}}.- {{x.name}}</span>
        </div>
      </div>
    </div>

<!-- end snippet -->