JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="https://cdn.mobify.com/modules/scooch/0.3.3/scooch.min.js"></script>
<link rel="stylesheet" href="https://cdn.mobify.com/modules/scooch/0.3.3/scooch.min.css">
<link rel="stylesheet" href="https://cdn.mobify.com/modules/scooch/0.3.3/scooch-style.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<body ng-app="app" ng-controller="MoviesCtrl">

<div class="btn-group btn-block dropdown" ng-class='{open:isOpen}'>

    <button type="button" class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown" ng-click='isOpen = !isOpen'>
    <span class="selection">{{dropdownCaption}}</span>&nbsp;<span class="caret"></span>
    </button>
    
    <ul class="dropdown-menu languagedropdown" role="menu">
        <li ng-repeat="language in languages" ng-click='filter(language.LangName)'><a href="#">{{language.LangName}}</a></li>
    </ul>
    
</div>

<div class="m-scooch m-scaled m-fade-out">
        
    <!-- the slider -->
    <div class="m-scooch-inner">

        <!-- the items -->
        <div class="m-item" ng-class="{'m-active':$first}" ng-repeat="movie in movies | filter:{LANGUAGE: selectedLanguageFunction}" id="{{movie.MOVIE_ID}}" ng-init="selectedMovie()">
            <img ng-src="{{movie.ICON_URL}}">
        </div>
        
    </div>

</div>

CSS

.m-scooch-inner {left: 50%;}
.m-item img {
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
box-shadow: 4px 3px 10px 5px rgba(0, 0, 0, 0.7); 
-webkit-box-shadow:     4px 3px 10px 5px rgba(0, 0, 0, 0.7);
-moz-box-shadow:        4px 3px 10px 5px rgba(0, 0, 0, 0.7);
border-radius:          10px;
-webkit-border-radius: 10px;
-moz-border-radius:     10px;
margin: 20% auto 20% -66%;}
.m-active img {margin-left: -50%;}
.movie_information {width: 82px; display: inline-block;}
.tab-pane {margin-top: 20px;}
body {margin-top: 20px;}
.dropdown-menu {width: 100%;}

JavaScript

var IFE = angular.module('app', [])

IFE.controller('MoviesCtrl', function($scope) {
    
    var get_movie_details = 
    {"MOVIE_ATTRS": [{"LANGUAGES": [{
    "LangId": "1",
    "LangName": "All"},{
    "LangId": "2",
    "LangName": "English"},{
    "LangId": "3",
    "LangName": "Dutch"}]},
    {"MOVIES": [{
    "MOVIE_ID": "16",
    "LANGUAGE": "Dutch",
    "ICON_URL": "https://image.tmdb.org/t/p/w185/cs3KJ3Wi8nVf57OHg9pCSEL4kI8.jpg"},{
    "MOVIE_ID": "17",
    "LANGUAGE": "English",
    "ICON_URL": "https://image.tmdb.org/t/p/w185/6EdnG97lo3SOu3WmSQ2SmiHG8jo.jpg"}]}]};  
    
    
    $scope.languages         = get_movie_details.MOVIE_ATTRS[0].LANGUAGES;
    $scope.movies            = get_movie_details.MOVIE_ATTRS[1].MOVIES;
    $scope.selectedLanguage  = "All";
    $scope.dropdownCaption   = "Choose Language";
    
    $scope.filterLanguage = function(filterValue) {
        $scope.selectedLanguageFunction = (filterValue == "All") ? "" : filterValue;
        $scope.dropdownCaption = (filterValue == "All") ? "Choose Language" : filterValue;
    }
    
    $scope.filter = function (newText) {
        //close the open dialog
        $scope.isOpen = false;
        // reinit the filter
        $scope.filterLanguage(newText);
    };
    $scope.isOpen = false;
    
});    
/*
$(document).ready(function(){
    $(".languagedropdown li a").click(function(){
      angular.element($('body')).scope().filterLanguage($(this).text());
      angular.element($('body')).scope().$apply();
      $('.m-item').removeClass('m-active');
      $('.m-scooch').scooch('reset');

      var text = $(this).text() == "All" ? "Choose Language" : $(this).text();
      $(this).parents(".btn-group").find('.selection').text(text);
    });
});
*/