$scope not working in app.js file. But $scope works when HTML file has contents of app.js file

When I use the Angular Script in HTML page Itself, all works fine including $scope.myOrderBy. But, when I use the same Script in Static/JS/app.js file everything is working except $scope.myOrderBy.
I want to use $scope.myOrderBy variable in app.js.

I found out that code actually works well in HTML itself but everything doesn’t work in app.js file.

// app.js file

var app = angular.module("productManager", []);
app.controller("productController", function ($scope, $http) {
    $scope.products = [];

    // This doesn't work and refelct back to html page.
    $scope.myOrderBy = "news";

    $scope.confirmDelete = false;
    $scope.productForm = {
        id: -1,
        proName: "",
        brand: "",
        madeIn: "",
        price: ""
    };

    _refreshProductData();

    function _refreshProductData() {
    }

    // Submit Button Button
    $scope.submitProduct = function () {

    };


    // Create New Product Button
    $scope.createNewProduct = function () {
    };


    // Delete Product Button
    $scope.deleteProduct = function (product) {
    };


    // Edit Product Button
    $scope.editProduct = function (product) {
    };

    // Success Function
    function _success(response) {
    };

    // Error Function
    function _error(response) {
    };

    // Clear Form Data
    function _clearFormData() {
    });

Expected to get output from html page to be like this after using {{myOrderBy}} :

news

Source: AngularJS