Protractor having problems pressing a hidden radio button

Question

I am having issues pressing a hidden radio button on my page using protractor. Below you will find a single test where the flow should work as following.

1. Page is navigated too, and make sure that the radio button exists. (Two ways to verify existence below, both work)

2. Attempt to click the button in a variety of different ways. All of the commented out ways, as well as the real one below do not error out the test, but they do also not "Click" the radio button. I am able to confirm this because of the 3 expects at the bottom that look to see if the form that shows up when the button is clicked actually shows up, and those are turning false every single time.

Any help with this would be greatly appreciated, Below I've also put the sample html that this code is looking at. Any help would be great, not sure if it is even possible. Thank you for any help in advance

       it('Should press one of the radio buttons and have the form pop up', function() {

    // Make sure that the value equals bank is found (This passing its test)
    expect(element.all(by.model('bankConnection.bank')).get(0).getAttribute('ng-value')).toEqual('bank');

    // Another way to make sure that the element is found (This is passing the test)
    // expect(element.all(by.css('[ng-value="bank"]')).get(0).getAttribute('ng-value')).toEqual('bank');

    // browser.driver.executeScript("return arguments[0].click();", element.all(by.css('[ng-value="bank"]')).get(0).getAttribute('ng-value').getWebElement());
    //   browser.driver.executeScript("return arguments[0].click();", element.all(by.model('bankConnection.bank')).get(0).getAttribute('ng-value').getWebElement());

    // #1 Way THIS WAY WORKS BUT DOESNT PRESS ANYTHING
    //  var input = element.all(by.model('bankConnection.bank')).get(0);

    // browser.driver.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', input.getWebElement());

    // #2 Way THIS WAY WORKS BUT DOESNT PRESS ANYTHING
    var input = element.all(by.model('bankConnection.bank')).get(0).getAttribute('ng-value');

    browser.driver.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', input.getWebElement());

    // To verify button was pressed. 2 seconds
    browser.driver.sleep(2000);

    // Make sure that the form pops up (IT IS CURRENTLY NOT SHOWING UP)
    expect(element(by.model('bankConnect.username')).isPresent()).toBe(true);
    expect(element(by.model('bankConnect.password')).isPresent()).toBe(true);

    // Once click is figured out this should flow through properly BOA CLICK
    expect(bank_page.idText).toEqual('Online ID');

    });

Radio Button Element

<div class="col" ng-repeat="bank in firstBanks">
  <div style="font-size: 2em; ">
   <label class="bank_radio">
     <input type="radio" ng-model="bankConnection.bank" ng-value="bank" class="ng-valid ng-dirty" value="[object Object]">
     <img ng-src="img/banks/bofa.png" src="img/banks/bofa.png">
   </label>
  </div>
 </div>

Form that pops up element

<div class="list card" style="margin-bottom: 0;margin-top:0;" ng-show="bankConnection.bank != null ">
 <div class-="list">

 <label class="item item-input">
  <span class="input-label ng-binding">Online ID</span>
   <input type="text" ng-model="bankConnection.username" class="ng-pristine ng-valid">
 </label>
 <label class="item item-input">
 <span class="input-label ng-binding">Password</span>
  <input type="password" ng-model="bankConnection.password" class="ng-pristine ng-valid" autocomplete="off" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</label>

 </div>
</div>

Answer 1

Here is what was able to fix my problem in the end. Courtesy of: How to click on hidden element in protractor?

I added this block to my code to hover over the area of the image, and then issue a click command.

// Move mouse over the button
browser.driver.actions().mouseMove(element(by.css('[ng-src="img/banks/bofa.png"]'))).perform();

    element.all(by.css('[ng-src="img/banks/bofa.png"]')).then(function (elm) {

        elm[0].click();
    });

Thank you for the help!