Autocomplete in AngularJS directive

First of all, I know the question has been pushed over the top of the stack many times, but I'm still sticking to how to solve it:

I am trying to use the answers: Chrome browser ignoring Autocomplete = Off.

so i used

autocomplete = "new password"

I have my application control directive:

<div class="appcontrol-password">
        <input ng-attr-type="{{appControl.password.hide && 'password' || 'text'}}"
               class="form-control appcontrol-password-input"
               id="{{appControl.uniqueId}}"
               ng-model="appControl.model[appControl.property]"
               ng-disabled="appControl.isDisabled"
               ng-focus="appControl.onFocus()"
               autocomplete="new-password"
               ng-blur="appControl.onBlur()"
               ng-class="{'appcontrol-input-error': appControl.errors.validationErrors.length && !appControl.isDisabled}">
        <a class="glyphicon glyphicon-eye-open appcontrol-password-image text-info" ng-mousedown="appControl.password.hide=false" ng-mouseup="appControl.password.hide=true"></a>
    </div>

      

        
        
        
      

    

which I am using in a form like this:

<div class="col-md-6">
      <app-control model="ctrl.passwordData.oldPassword" label="{{'Old password' | translate}}" render-as-password-input="true" autocomplete="new-password"></app-control>
</div>
<div class="col-md-6">
      <app-control model="ctrl.passwordData.newPassword" label="{{'New password' | translate}}" render-as-password-input="true" autocomplete="new-password"></app-control>
 </div>

      

        
        
        
      

    

but i still get

I am testing Chrome v.58 Thanks a lot!