Modifying Angular array object onload
<p>Background: I'm using Bootstrap's <code>breadcrumb</code> to output <code>/ some / path / to / my / file</code>. To ensure the breadcrumb stays within the width of the page I want to compare the length of the breadcrumb text with the width of its container. If the width of text exceeds the container, I will modify the breadcrumb data array until it fits, i.e. <code>/ ... / to / file</code></p>

<p>Because the breadcrumb data exists in an array and is not hard-coded in the page, it's not possible to measure the width of the text UNTIL the page has fully loaded.</p>

<p>I would use <code>&lt;body onload="widthChecker()"&gt;</code> but this won't work with Angular, and I don't believe <code>ng-init</code> will work either.</p>

<p>Here is my code so far...</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var folderArray = [{
  folder: 'the quick brown fox jumps over the lazy dog'
}, {
  folder: 'the quick brown fox jumps over the lazy'
}, {
  folder: 'the quick brown fox jumps over the'
 }, {
  folder: 'the quick brown fox jumps over'
  }, {
  folder: 'the quick brown fox jumps'
}];    
    
(function() {
  var app = angular.module('myApp', []);

  app.controller('AppController', function() {
    this.files = folderArray;
  });

})();

function checkWidths() {

  var cWidth = document.getElementById("breadcrumb-container").offsetWidth;
  var tWidth = document.getElementById("breadcrumb-container").scrollWidth;
  
/*
  while (tWidth &gt; cWidth) {
    
     Condense objects in folderArray into ellipsis until the breadcrumb fits
  
  }
*/
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#breadcrumb-container {
  width: 100%;
white-space:nowrap;
}

.breadcrumb {
  display: table;
}
     
.breadcrumb li {
  display: table-cell;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html ng-app="myApp"&gt;
&lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
    
&lt;body ng-controller="AppController as box" onload="checkWidths();"&gt;
  
&lt;div id="breadcrumb-container"&gt;
  &lt;ol class="breadcrumb"&gt;
    &lt;li ng-repeat="file in box.files"&gt;&lt;a href="#"&gt;{{ file.folder }}&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;  
  
  
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>