angular ng-show expressions string evaluating not working as expected

Question

I am trying to a list elements based on a selection with ng-repeat and ng-show, i cant understand why ng-show is not working as expected.

function Ctrl($scope) {
$scope.categories = [

{"name": "alpha"},
{"name": "beta"},
{"name": "gama"}

];
$scope.subcategories = [

{"parent": "alpha",
    "text" : "alpha text"},
{"parent": "beta",
    "text" : "beta text"},
{"parent": "gama",
    "text" : "gama text"}

];   
}

-

<div ng-controller="Ctrl">
<div>
    Categorie: 
    <select id="country" ng-model="categorie">
      <option value=''>Select</option>
      <option ng-repeat="cat in categories" value="{{cat.name}}">{{cat.name}}</option>
    </select>
    <p>Selected categorie: {{categorie}} </p>
</div>
<div>
<p ng-repeat="x in subcategories" ng-show="x.parent == 'categorie'">
  {{x.text}}
</p>
</div>

Answer 1

try this.

 <p ng-repeat="x in subcategories" ng-show="x.parent == categorie">

and also you can use this

  <p ng-repeat="x in subcategories | filter:{parent:categorie}" >

var app = angular.module("app",['angular.filter'])
app.controller('ctrl',['$scope', function($scope){
       $scope.categories = [

{"name": "alpha"},
{"name": "beta"},
{"name": "gama"}

];
$scope.subcategories = [

{"parent": "alpha",
    "text" : "alpha text"},
{"parent": "beta",
    "text" : "beta text"},
{"parent": "gama",
    "text" : "gama text"}

];   
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
    Categorie: 
    <select id="country" ng-model="categorie">
      <option value=''>Select</option>
      <option ng-repeat="cat in categories" value="{{cat.name}}">{{cat.name}}</option>
    </select>
    <p>Selected categorie: {{categorie}} </p>
</div>
<div>
<p ng-repeat="x in subcategories | filter:{parent:categorie}" >
  {{x.text}}
</p>
</div>