How to use translate in angularjs?

Hi I am new to angularjs world. I am doing registration page and my app contains English and Arabic pages. I am storing English and Arabic words in JSON files. This is my index.html file.

<body ng-app="RoslpApp">
    <div ng-controller="RoslpAppController">
        <div class="popup">
            <label>Language</label>
            <select ng-model="selectedItem">
                <option>العربية</option>
                <option>English</option>
            </select>
            <button ng-click="clickHandler(selectedItem)">Submit</button>
            <ul id="nav">
            <li><a ui-sref="Registration">Registration</a></li>
            </ul>
            <div class="container">
            <div ui-view></div>
        </div>
        </div>
    </div>
</body>

This is my main.js file.

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    $stateProvider
           .state('Registration', {
               url: '/Registration',
               templateUrl: 'Registration/Registration.html'
           });
    $translatePartialLoaderProvider.addPart('Registration');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: "/scripts/Locales/{part}/{lang}.json"
    });
    $translateProvider.preferredLanguage('de_EN');
});
app.run(function ($rootScope, $translate) {
    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
        $translate.refresh();
    });
});
app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate) {
    $scope.clickHandler = function (key) {
        $translate.use(key);
    };
}]);

This is my registrationcontroller.

(function () {
    angular.module('RoslpApp').controller('RegistrationController', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $translatePartialLoader.addPart('Registration');
        var isPartAvailable = $translatePartialLoader.isPartAvailable('Registration');
        if (isPartAvailable) {
            $translate('Fname').then(function (data) {
                $rootScope.PageSubTitle = data;
                console.log($rootScope.PageSubTitle);
            });
        }
    }]);
})();

This is my Registration.html. I am posting only one field to save space.

<label>First Name</label>
                    <input type="text" id="FirstName" class="FirstName" translate="yes" >

This is my de_EN.json file.

{
    "Fname":"Fnamein English"
}

I have arabic file also. I am not able to translate Fname in the above code. May I get some help here to fix this. Any help would be appreciated. Thank you.

Solution

 after debuging the plnkr i fount the solution 

app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    $stateProvider
           .state('Registration', {
               url: '/Registration',
               templateUrl: 'Registration.html',
               controller: 'RegistrationController'
           });
    $translatePartialLoaderProvider.addPart('Registration');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: "{lang}.json"
    }); 
    $translateProvider.preferredLanguage('de_AR');


});
// app.run(function ($rootScope, $translate) {
//     $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
//         $translate.refresh();
//     });
// });

------------------
    i also edited index.html head part


      <title>Raya Financing</title>
        <link href="style.css" rel="stylesheet" />
        <link href="menu.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
       crossorigin="anonymous"></script>
      <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
        <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
           <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

        <script src="angular-translate-loader-partial.min.js"></script>
        <script src="Main.js"></script>
         <script src="custom.js"></script>
        <script src="menu.js"></script>
        <script src="RegistrationController.js"></script>



        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">