Problem: $scope is undefined for Search Header in Tabs (codepen included)

So I tried to have a Search Tab which shows Search on Top for the Content to refer to (So basically the Flickr Showcase but as a Tab) but I stumbled into a Problem. It keeps saying that the Query is Undefined.

Below is a codepen of the problem, just try to input anything into the Search and it will alert saying that it is undefined.

See the Pen $scope is undefined in Tabs by Julian Alimin (@dmastag) on CodePen.

Thanks in advance!

So, I was searching for a Solution when I came to the following post.

Form ng-submit=“search()” inside ion-content doesn’t work

So I changed the ion-content from

<script id="templates/about.html" type="text/ng-template">
  <ion-view title="About">
    <ion-content class="padding">


<script id="templates/about.html" type="text/ng-template">
  <ion-view title="About">
    <ion-content class="padding" ng-controller="AboutTabCtrl">

I tried to compare both in Batarang and turns out that if the Controller is injected (is this the right word?) then the search function and the query will be in the same scope. Not sure why, but at least it is working now.