Angular.js: directive fields disappear in Android 4.0.4 + PhoneGap

Question

I am a newbie to Angular.js and I am having some issues with an Android deployment of my PhoneGap app. In my HTML code for index.html, I have the following:

<textfield data="mandantData" model="mandant"></textfield>
<textfield data="nameData" model="name"></textfield>
<passwordfield data="passwordData" model="password"></passwordfield>
<checkboxfield data="checkboxData" model="remember"></checkboxfield>

These are directives that act as wrappers for form fields. Here's an example of one of the defined directives:

app.directive('textfield', function() {
    return {
        scope : {
            data : '=data',
            model : '=model'
        },
        restrict : 'E',
        templateUrl : 'app/partials/textfield.html'
    };
});

And here's my textfield.html:

<div class="textField">
    <div class="label-wrapper">
        <label for="{{data.fieldName}}">{{data.labelText}}</label>
    </div>
    <div class="field-wrapper">
        <input type="text" id="{{data.fieldName}}"/ ng-model="model">
    </div>
</div>

When I deploy my app to Android and I open the index.html page, it seems to behave just nicely. However, I keep getting this strange behaviour: once I go to some other page and then I get back to index.html, the form fields disappear at first! Oddly enough, they seem to reappear soon; I am unsure about whether they appear when I tap the screen or they appear automatically a couple of tents of a second later. In any case, this behaviour is undesiderable. It doesn't happen in iOS nor Chrome for Windows.

Is there a way in which I can force Angular to refresh the browser's UI every time my index.html file is loaded? If not, is there any workaround to this issue?

For extra credit (although totally unrelated), can I get rid of the "model" attribute for each directive and simply put it inside the "data" array as well? I tried to do this before but it didn't seem to work.

Answer 1

The following is very dirty but worked:

$timeout(function() {
    $('#mandant').focus();
    $('#mandant').blur();
}, 10);

Clicking didn't help but focusing a field forces Android to repaint everything. Blurring is optional but advisable. The timeout is not optional -at least not in my case- since it takes some time to process the directive and so $('#mandant') is not immediately available.

Oh, by the way, I tried to reproduce the issue in the Android browser by uploading the code to a website and it worked just fine. It was only broken in Cordova/PhoneGap.