angularfire using $loaded how to access data in a directive

Question

This post is a follow up of this (the goal is set img to visibily and set the src)

html

<form class="form-horizontal" role="form" name="form" data-ng-submit="add()">
    <div class="form-group">
        <input type="text" name="title" tabindex="1" class="form-control" placeholder="{{ 'items.form.title' | translate }}" data-ng-model="item.title" required="required" data-ng-minlength="3" data-ng-maxlength="25" user-feedback />
    </div>
    <div class="form-group">
        <input type="text" name="ingredients" tabindex="2" class="form-control" placeholder="{{ 'items.form.ingredients' | translate }}" data-ng-model="item.ingredients" required="required" ng-pattern="/^\w(\s*,?\s*\w)*$/" user-feedback />
    </div>
    <div class="form-group">
        <input type="text" name="price" tabindex="3" class="form-control" placeholder="{{ 'items.form.price' | translate }}" data-ng-model="item.price" required="required" data-smart-float user-feedback />  
    </div>
    <div class="form-group">
        <button type="button" tabindex="4" class="btn btn-default btn-lg" item="item" data-uploader>{{ 'items.form.upload' | translate }}</button>
        <input type="text" name="url" style="display:none;" required="required" data-ng-model="item.url" />
    </div>
    <div class="form-group form-no-required clearfix">
        <div class="pull-right">
            <button type="submit" tabindex="5" class="btn btn-primary" data-ng-disabled="form.$invalid">{{ 'items.form.submit' | translate }}</button>
        </div>
    </div>
</form>

js

app.controller('ItemsUpdateController', function ($scope, item, Items, $state) {
    item.$loaded().then(function(data) {
        $scope.item = data;   
    });
    $scope.add = function() {console.log($scope.item);
       /* Items.update(item.$id,$scope.item).then(function () {
            $state.transitionTo('items');
        });*/
    }
});
app.directive('uploader', function() {
    return {
        restrict: 'A',
        scope:{
            item: '='
        },
        link: function(scope, element, attrs) {
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                var fileElem = angular.element('<input type="file" style="display:none;">');
                var imgElem = angular.element('<img src="" width="50" style="margin-left:10px;visibility:hidden;">');
                element.after(fileElem);
                element.after(imgElem);console.log(scope.item); //This give me undefined
                /*if(scope.item.url){
                     imgElem.css('visibility','visible');
                     imgElem[0].src = scope.item.url;
                }*/
                fileElem.on('change',function(e){
                    e.stopPropagation();
                    var files = e.target.files;
                    var reader  = new FileReader();
                    reader.onloadend = function () {
                        var url = reader.result;
                        imgElem.css('visibility','visible');
                        imgElem[0].src = url;
                        scope.$apply(function () {
                           scope.item.url = url;
                        });
                    }
                    reader.readAsDataURL(files[0]);
                });
                element.on('click', function(e) {
                    e.stopPropagation();
                    fileElem[0].click();
                });
                element.on('$destroy',function(){
                    element.off('click');
                });
                fileElem.on('$destroy',function(){
                    fileElem.off('change');
                });

            }
        },
    };
});

Why console.log(scope.item); give me undefined but I can see the right values fill the form ? and how can I get the value ? (btw I've tried also with $timeout or $apply but both doesn't work)

I've also tried with

scope.$watch('item', function(newVal, oldVal){
     console.log(newVal, oldVal);
}, true);

but I've got [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"

and I don't really understand why

console.log(scope.item);// Object { $$conf={...}, $id="-J_C-q-6bIW9PBZzqpAg"
console.log(angular.equals({}, scope.item));// but this is true !

Ugly ends up

//controller
$scope.item = item;
$scope.item.$loaded().then(function(data) {
  $scope.item = data;   
});
//directive
if(scope.item.$id){
    scope.item.$loaded().then(function(data) {
        imgElem.css('visibility','visible');
        imgElem[0].src = data.url;
    });

if anyone have got a better solution is welcome :) }