Increase clickable area of button in ion-nav-bar
<p>I have an Ionic app with a navbar. In this navbar are buttons that are a little bit bad to touch. So I want to increase the touch area of the buttons. I tried this: </p>

<pre><code>&lt;ion-nav-bar class="bar bar-stable background-main-color" align-title="center"&gt;
&lt;ion-nav-buttons side="primary"&gt;
  &lt;div class="navbarIconArea" ng-click="test2()"&gt;
     &lt;button class="button searchIcon background-main-color icon-color" ng-click="test()"&gt;&lt;/button&gt;
  &lt;/div&gt;
&lt;/ion-nav-buttons&gt;
[...]
&lt;/ion-nav-bar&gt;
</code></pre>

<p>But <code>test2()</code> is just called when the button is clicked exactly and <code>test()</code> is invoked, too. The div works when it is outside of an <code>ion-nav-bar</code>.</p>

<p>Any idea how to fix this or how to increase the area otherwise?</p>

<p>CSS (50px just to test, will be 10px):</p>

<pre><code>.navbarIconArea {
    padding-right: 50px;
    padding-left: 50px;
    padding-top: 2px;
    display: inline-block;
}
</code></pre>

<p><strong>EDIT:</strong> </p>

<p>The problem is not that I both functions are called when clicking on the button. It is that <code>test2()</code> is not called when clicking on the area around it.</p>