JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="myController">
    <select ng-model="selectedhobby">
        <option value="games">games</option>
        <option value="pets">pets</option>
        <option value="music">music</option>
    </select>
     <div class="tab-pane" ng-repeat="item in Hobbies" ng-show="selectedhobby == item.hobby">
                <div class="row">
                   <div class="col-md-12">
                            <div class="widget">
                                  <h4 class="widget-content-light">
                                    Name: {{item.name}}<br>
                                    Gender:{{item.gender}}
                                    Hobby:{{item.hobby}}
                                   </h4>
                                    </div>
                                </div>
                            </div>                            
                        </div>
    
    
</div>

JavaScript

var app = angular.module('app',[]);
app.controller('myController',function($scope){
    $scope.Hobbies = [{
    "name": "Lucy",
    "gender": "Female",
    "hobby": "games",
},
{
    "name": "John",
    "gender": "Male",
    "hobby": "pets",
},
{
    "name": "Chris",
    "gender": "Male",
    "hobby": "music",
},
{
    "name": "Annie",
    "gender": "Female",
    "hobby": "sports",
}];

});