show or hide popover of a parent element from controller - angularjs

I have the following div and inside it is an input text. The div has a popover and I wish to show it whenever the input text is on focus. If the input text is out of focus, I wish to hide the popover. I am currently trying to do that with the following code:

HTML:

<div id="divParent" bs-popover
    data-trigger="focus click" 
    data-auto-close="1"
    data-placement="bottom"
    class="pswd-popover"
    data-template-url="people/user/user-profile/templates/password-requirements.html">
    <rp-form-input-text
        rp-model="page.userData.password"
        config="page.formConfig.password">
    </rp-form-input-text>
</div>  

MODEL:

model.password = inputTextConfig({
    id: "password",
    fieldName: "password",
    dataType: "password",
    required: false,
    maxLength: 24,
    modelOptions: {
        allowInvalid: true,
    },
    onFocus: model.getMethod("showPopover")
});

CONTROLLER:

vm.showPopover = function () {
    var focus = true;

    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9 && focus) {
            $timeout(function() {
                angular.element('#divParent').trigger('click');
            }, 100);
            focus = false;
        }
    });

};

The issue I'm having is I only want the onfocus function to trigger via tab. Because clicking the div automatically triggers the show of popover. That's why I have the keyup function in order to detect if the div was clicked or accessed via TAB. Another issue is I only show and hide the popover by triggering the onclick of the div. How can I show and hide the popover of the parent div from the controller?