javascript - Passing data to model inside the ng-click -

i displaying of articles database , i've created simple text search it.

<input ng-model="searchtext" placeholder="search articles" class="search-text"> 

and filtering content searchtext

<section class="articles" ng-repeat="contentitem in content | filter:searchtext"> 

now i'm trying have buttons categories , tags database , able filter content based on button values.

<span ng-repeat="category in categories">   <button ng-click="searchtext = '{{category.local.name}}'" class="btn btn-primary">{{ category.local.name }}</button> </span> 

the code above not working example if i'm taking out ng-repeat , type categories myself work:

<span>   <button ng-click="searchtext = 'some text'" class="btn btn-primary">some text</button> </span> 

my question how can way pass content search input , buttons filter method?

here full code:

<div class="container">  <h1>list of articles</h1> <section class="search-items"> <input ng-model="searchtext" placeholder="search articles" class="search-text"> <div class="row">   <div class="col-sm-6">     <h6>search based on categories:</h6>     <span ng-repeat="category in categories">       <input type="button" ng-click="searchtext = '{{ category.local.name }}'" value="{{ category.local.name }}" class="btn btn-primary">     </span>   </div>   <div class="col-sm-6">     <h6>search based on tags:</h6>     <span ng-repeat="tag in tags">       <input type="button" ng-click="searchtext = '{{tag.local.name}}'" value="{{ tag.local.name }}" class="btn btn-primary">     </span>   </div> </div> </section> <section class="articles" ng-repeat="contentitem in content | filter:searchtext">   <article class="well">     <h3>{{ contentitem.local.title }}</h3>     <p>{{ contentitem.local.content }}</p>     <span><b>article author: {{ contentitem.local.author }}</b></span><br/>     <span class="label label-primary">{{ contentitem.local.categories.category }}</span>     <span class="label label-primary">{{ contentitem.local.tags.tag }}</span>   </article>  </section> </div> 

angular.module('myapp', [])  .controller('thingscontroller', function(){    var ctrl = this;    ctrl.things = ['thing 1', 'thing 2', 'another thing']    ctrl.searchtext = "something"  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>  <div ng-app="myapp" ng-controller="thingscontroller thingctrl">  <div ng-repeat="thing in thingctrl.things">    <button ng-click="thingctrl.searchtext = thing">{{thing}}</button>  </div>    <pre>{{thingctrl.searchtext}}

above snippet shows working using controller syntax. typically don't want use $scope though it's model want point model otherwise may run weird prototypical inheritance problems. in $scope.mymodel = {someprop:4} instead of $scope.someprop = 4 using controller syntax avoids issue.

what nuances of scope prototypal / prototypical inheritance in angularjs?