Directives NOT linking on iOS or Android devices!

Hi guys,

This is my first post on the forums so thanks in advance for your help.

A bit of a strange one - my directives are not linking on devices. They work fine in the browser and simulator, but when deployed to devices none in the link: or controller: code runs.

In this example, none of the link: code runs:

(function (){
    'use strict';

    angular.module('dsd.directives').directive('interactiveHeader', interactiveHeader);

    function interactiveHeader($window, $ionicScrollDelegate, $timeout){
        return {

            restrict: 'A',
            bindToController: true,
            link: function ($scope, element, attrs) {

                var header = element.find('ion-pane.header-panel');
                var content = element.find('ion-content');
                var header_nav = $('#header-navbar');
                var header_nav_bar = header_nav.find('.bar-header');
                var header_content = header.find('#header-panel-content');
                var header_badge = header_content.find('#header-panel-badge');
                var header_info = header_content.find('#header-panel-info');


                // Listen for changes in the values collection.
                // When it changes, log the in-memory length in
                // comparison to the in-DOM length of the elements
                // generated based on the collection.
                $scope.$watch(
                    "theDo",
                    function( newValue, oldValue ) {
                        // Ignore first run that results from
                        // initial watching binding.
                        if ( newValue === oldValue ) {
                            return;
                        }
                        if(header_badge.height() + header_info.height() > header_content.height() - 15){
                            header_content.addClass('mini');
                        };

                    }
                );


                // we need to identify an individual scroll view
                // let's grab the view title and set the content 'delegate-handle' to the same name.
                // we'll reference the scrollview by this handle later on...
                var delegate_handle = content.attr('delegate-handle');
                var scrollView;
                $timeout(function () {
                    scrollView = $ionicScrollDelegate.$getByHandle(delegate_handle).getScrollView();
                }, 200);

.
.
.
.

And in this directive, the template renders out, but none of the interactivity from the controller:

(function (){
    'use strict';

    angular.module('dsd.directives').directive('modalImage', modalImage);

    function modalImage(){
        return {
            restrict: 'E',
            template: '<div class="image-feed-thumb"  style="background-image: url({{ experience.media }} );" ng-show="{{ experience.hasMedia }}" ng-click="showImageModal(experience.media)"></div>',

            controller: function($scope, $compile, $http, utilsService) {
                $scope.showImageModal = function(modalImageSrc){
                    $scope.modalImageSrc = modalImageSrc;
                    utilsService.ShowFullScreenImageModal($scope);
                }
            }
        }
    };
})();

I’ve gone round and round with this and can’t find anything to help online either. Can anyone shed any light on what might be going on?

Thanks for your time

Emile