Ng-click and ng-change aren't being fired when using component and template angular 1.6

Question

I am trying to fire a function when something is typed into the input. For some reason, it is not working when I use a template and component. Can anyone help me figure out why this is happening? I am new to Angular by the way.

Component When the button is clicked or when something is typed into the input, the ng-click and ng-change functions should fire but they are not.

(function(angular) {
  'use strict';
  angular
    .module('app')
    .component('coinSearch', {
      controller: CoinSearchController,
      controllarAs: 'coin',
      templateUrl: 'src/coinSearch.html'
    });


  function CoinSearchController(CryptoService) {
    var coin = this;
    var list = [];
    coin.jank="something weird";
    coin.savedCoins = [];
    coin.searchedCoin = '';

  function getCrypto() {                      //pulls data from API
      CryptoService
        .retrieve()
        .then(function(response) {
            coin.list = response;
        });
    }

    coin.click = function() {
      console.log('HELLOOO');
    };

    coin.showSearch = function() {
      console.log('hello');               
      return coin.searchedCoin === '';
    };
      getCrypto();
  }
})(angular);

Template Template for the component above. There are some console.logs for testing purposes.

<div class="container">
   <form class="search-form">
    <button ng-click="coin.click()">{{coin.jank}} </button> //testing

    <input
      type="text"
      class="search"
      placeholder="Search Crypto"
      ng-model="coin.searchedCoin"
      ng-change="coin.showSearch()">





    <ul class="suggestions">
        <li ng-hide="coin.showSearch()" ng-repeat="coins in coin.list | 
filter:coin.searchedCoin">
            <span>{{coins.name}} ({{coins.symbol}})</span>
            <span>${{coins.price_usd}}</span>
            <span><button ng-
click="coin.addToList(coins);">Add</button></span>
            </li>
        </ul>
    </form>
    <coin-list></coin-list>
</div>

Answer 1

If you look at your controllerAs statement, you have it spelled as controllarAs. That would explain why nothing is listening in the template when you use coin.