Control deslizante jQuery no funciona en angularjs

Mi control deslizante no aparecerá en la primera navegación de la página. Sin embargo, cuando renuevo la página, aparece y, si sustituyo el código

por el contenido de la página front.html , el control deslizante también comienza a funcionar. Déjame saber qué estoy haciendo mal en angular, ya que creo que es algo básico que me falta.

El siguiente es mi código de diseño –

     WEBSITE          jQuery(document).ready(function($) { jQuery(window).load(function() { jQuery('.flexslider').flexslider({ animation: "slide" }); }); });    

El siguiente es mi código de controlador principal :

 var myApp = angular.module('myApp', ['ngRoute']); myApp.config(function($routeProvider){ $routeProvider .when('/', { templateUrl: 'views/pages/front.html', controller: 'frontCtrl' }) }); 

En front.html tengo código deslizante –

 

EDITAR

Si también escribo este código en la consola Firebug, el control deslizante también comienza a funcionar pero no en la carga de la página.

 jQuery('.flexslider').flexslider(); 

El controlador de eventos adjunto con jQuery(window).load se ejecutará cuando la página esté completamente cargada. Sin embargo, ng-view no ha cargado tu vista todavía, lo que significa que

no existe.

Mueve la inicialización a una directiva:

 myApp.directive('flexslider', function () { return { link: function (scope, element, attrs) { element.flexslider({ animation: "slide" }); } } }); 

Y usar así:

 

Demostración: http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview