Component binding not working : Angularjs

Question

Hi I'm trying to create a component, it works fine in controller, however not binding values to view.

My Component is as below

app.component("bdObjects", {
    templateUrl: "app/templates/components/BusinessObjects.html",

    controller: ["$scope", "$http", "$log", "API_ROOT", "VisDataSet", 
        function ($scope, $http, $log, API_ROOT, VisDataSet) {


        $scope.fnAdd = function() {
            $scope.objectId = "";
            $scope.objectName = "Test Object";
            console.log($scope.objectName);
        }

        $scope.cancelAdd = function() {
            if($scope.items.length > 0) {
                $log.info($scope.items[0]);
                $scope.fnPopulateForm($scope.items[0]);
            }
        }
    }], 

    bindings: {
        data: "=",
        objectId: "=",
        objectName: "="
    }
});

My Template

<div class="general-form">
    <input type="hidden" name="id" ng-model="objectId">
    <label>Name:</label>
    <br>
    <input class="form-control" name="name" placeholder="Name" ng-model="objectName">
    <br>
</div>

So on add button I tried to assign value to input box. but it's not taking. and I want to make that two way binding. so later I'll have save button, so changing the value in TextBox will replace in Controller.

Thanks.

Answer 1

I tried with $timeout() and it got working.