Creo que estas enfocando mál el problema. En angular es una mala práctica usar DOMReady
para ejecutar código ya que angular tiene su propio ciclo de inicialización.
Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'
Recuerda que angular es un SPA o sea que una vez que el framework toma el control el resto de las vistas son cargadas usando llamadas a ajax e insertando el contenido en puntos específicos del árbol del DOM por lo que el evento DOMReady
no se ejecutará más.
En un SPA todos los códigos de HTML, JavaScript, y CSS se carga de una vez o los recursos necesarios se cargan dinámicamente como lo requiera la página y se van agregando, normalmente como respuesta de los acciones del usuario. La página no tiene que cargar otra vez en ningún punto del proceso tampoco se transfiere a otra página.
Para lidiar con esto puedes usar directivas o servicios para encapsular tu código y que este se ejecute para elementos específicos o en respuesta a determinadas acciones del usuario. Lo que tienes puede ser reescrito de esta forma.
function focusBlur() {
return {
restrict: 'A',
link: function($scope, $element) {
$element.on('focus blur', function (e) {
$element.parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
});
$element.trigger('blur');
}
};
}
focusBlur.$inject = [];
angular.module('app')
.directive('focusBlur', focusBlur);
Y luego se la aplicas a tus elementos así
<input focus-blur id="sample" name="sample" class="form-control" value="4">
Aquí tienes un demo
function focusBlur() {
return {
restrict: 'A',
link: function($scope, $element) {
$element.on('focus blur', function(e) {
$element.parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
});
$element.trigger('blur');
}
};
}
focusBlur.$inject = [];
angular.module('app', [])
.directive('focusBlur', focusBlur);
.form-group.focused {
box-shadow: inset 0 0 2em gold;
webkit-box-shadow: inset 0 0 1em gold;
moz-box-shadow: inset 0 0 1em gold;
}
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div ng-app="app">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3">Nombre</label>
<div class="col-md-9">
<input focus-blur id="nombre" name="nombre" class="form-control" value="Jose">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Apellidos</label>
<div class="col-md-9">
<input focus-blur id="apellidos" name="apellidos" class="form-control" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Edad</label>
<div class="col-md-9">
<input focus-blur id="edad" name="edad" class="form-control" value="25">
</div>
</div>
</div>
</div>
Por supuesto esto implica que tienes que agregar esta directiva a cada uno de los elementos cuyo comportamiento deseas modificar lo cual a primera vista puede parecer trabajoso pero esta es la forma en la que está pensada la arquitectura del angular para que tu código pueda ser reusable, testeable, etc.
Este link (en inglés) te puede explicar un poco mejor el porqué deberías estructurar tu código de esa forma http://ng-learn.org/2014/01/Dom-Manipulations/