angularjs filter on nested objects

I am quite new with angularjs so I am not sure if what I am trying to do is the right way. Basically I want to display in my page a nested object, and a filter, this way the user can easily type keywords on an input and the content get filtered, to only display the recods that get found by the filter

However I notice that the filter gets the whole parent object and i was expecting only display the record, so with the following code, if i search for Japan it will display Sydney, Melbourne and los angeles.

Javascript

<script type="text/javascript">
    var demoApp = angular.module('demoApp',['ngSanitize']);
    demoApp.controller('simpleC',['$scope', function ($scope){
        $scope.info = [
        {name: 'Documents',links:  [
                {linkname:'title1',linknamesublink:[
                        {namesublink:'document 1', description: 'Sydney'},
                        {namesublink:'document 2', description: 'Tokyo <b>Japan</b>'}
                        ]},
                {linkname:'title2',linknamesublink:[
                        {namesublink:'document 3', description: 'Melbourne'},
                        {namesublink:'document 4', description: 'Los Angeles'}
                        ]}
                ]},
        {name: 'Video',links:  [
                {linkname:'title1',linknamesublink:[
                        {namesublink:'video 1', description: 'California'},
                        {namesublink:'video 2', description: 'San Francisco <b> USA</b>'}
                        ]},
                {linkname:'title2',linknamesublink:[
                        {namesublink:'video 3', description: 'South America'},
                        {namesublink:'video 4', description: 'Northern <b>Europe</b>'}
                        ]},
                {linkname:'title3',linknamesublink:[
                        {namesublink:'video name 5', description: 'Africa'},
                        {namesublink:'video name 6', description: 'Bangkok <b>Thailand</b>'}
                        ]}
                ]},
        ];
    }]);
</script>

html: 

<div class="container" ng-app="demoApp">
    <br /><input type="text" class="form-control" ng-model="search" >           
    <div ng-controller="simpleC">
        <div ng-repeat="i in info | filter:search" >
            {{i.name}}  : 
            <div ng-repeat="link in i.links">
                {{link.linkname}}
                    <div ng-repeat="sublink in link.linknamesublink">
                            {{sublink.namesublink}}: <!--{{sublink.description}}-->
                            <span ng-bind-html="sublink.description"></span>
                    </div>
            </div>
        </div>    
    </div>
</div>

Follow this example

http://www.whatibroke.com/?p=857

You can use filter in ng-repeat to filter items by property or write a filter yourself.

The author want to filter postcode property by the value of searc_postcode. So, he wrote //filter {postcode : search_postcode} //

Ps. Sorry, I misinterpret your question.

Write your own filter function. This way, you have total control over what is returned. https://docs.angularjs.org/api/ng/filter/filter

module.filter('searchfilter', function() {
  return function(searchexpr) {
   var filteredList = ['my', 'filtered', 'result'];//implement yourself
   return filteredList;   
  }; 
});

and use searchfilter instead of filter in your markup.

Or, try to use a filter function as described here: http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/filtering-and-sorting-a-list.html (as far as I can tell, you didn't define a search function, i.e. the first agument for the filter expression).

Modified :

If you want to filter the objects based on any field(say "name"), you can use the below format

<div ng-repeat="i in info" ng-if="search==i.name">