I have a problem in which I need to hide results until the user has started typing into the search bar. I am using a DotNetNuke plugin, and therefore did not build this module myself. The scopes I believe I need to use are for '`.angrid-search`' which has a method that returns the search terms, which it will then use in order to decide if the 'angrid-grid' will be displayed. This is the code I have tried thus far, as well as many different similar variations.

```
if (angular.element($('.angrid-search')).searchTerms === undefined){
    angular.element($('.angrid-grid')).hide();
}

```

`angular.element($('.angrid-search'))` comes back with `undefined`, and returns the search terms once something is typed in. It seems to me that the problem is in the second line, in which I try to hide the element.

I am extremely new to Angular (this is pretty much my first real problem), so explaining in layman's terms would be greatly appreciated, especially since I need to learn just as importantly as I need to solve this problem.

Here is the basic DOM

```
<div class="angrid">
    <div class="angrid-search">
    </div>
    <div class="angrid-grid-view">
        <div class="angrid-grid">
        </div>
    </div>
</div>

```

There is a bunch of stuff inbetween, but these are the relavent scopes and I did not want to cpypst the inspector window. My main question is: Is the `.hide()` method supposed to work in this type of sitation?