html does not have access to object in controller angularjs

Question

I want to show the object in view. The object itself is the controller, but the html does not have access to its properties (probably not see the model)! Maybe the problem ui routing? app.js

    (function () {
	'use strict';

	angular
	.module('hawk', [ 
		'ngWebsocket', 
		'ui.bootstrap',
		'ui.router', 
		'hawk.controllers',
		'hawk.services',
		'hawk.directives'
		])
	.config(['$stateProvider', '$urlRouterProvider', router])
	.run(['$rootScope', main]);

	angular.module('hawk.services', []);
	angular.module('hawk.directives', []);
	angular.module('hawk.controllers', []);


	function router($stateProvider, $urlRouterProvider) {

		$urlRouterProvider.otherwise('/list');

		// CARDS OBJECT VIEW
		$stateProvider
			.state('list', {
			abstract: true,
			url: '/list',
			templateUrl: '/app/app-eng/controllers/list.html',
			controller: 'ListController as dc'
		})	
			.state('list.cards-list', {
				url: '/cards-list',
				templateUrl: '/app/app-eng/controllers/object-card/cards-list.html',
				controller: 'CardsListController as dc',
			})
			.state('list.contract', {
				url: '/contract',
				templateUrl: '/app/app-eng/controllers/object-card/contract.html',
				controller: 'ContractController as dc',
			})
			
	}

	function main ($rootScope) {
		$rootScope.object = {};
	}
})();

The submittion list.cards-list I have access to the object (from model), but submitting list.contract I get the object and can not access its properties (in model). Why?

list.html

<div class="list-group col-md-2 sidebar-offcanvas">
    <uib-tabset active="activePill" vertical="true" type="pills">
        <uib-tab index="0" heading="Cards list" ui-sref="list.cards-list"></uib-tab>
        <uib-tab index="1" heading="Contract" ui-sref="list.contract"></uib-tab>
    </uib-tabset>
</div>
<div class="col-md-10">
    <div ui-view></div>
</div>

contract.html

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Contract #{{ 2222222}}</h3>
  </div>

  <table class="table table-condensed">
    <tr>
      <td width="10%" align="right"><strong>№ contract:</strong></td>
      <td>{{dc.data.id}}</td>
    </tr>
    <tr>
      <td align="right"><strong>Date start:</strong></td>
      <td>{{dc.data.cdstart}}</td>
    </tr>
    <tr>
      <td align="right"><strong>Date end:</strong></td>
      <td>{{dc.data.cdend}}</td>
    </tr>
    <tr>
      <td align="right"><strong>Type name:</strong></td>
      <td>{{dc.data.tyonames}}</td>
    </tr>
    <tr>
      <td align="right"><strong>Category.:</strong></td>
      <td>{{dc.data.ccategory}}</td>
    </tr>
    <tr>
      <td align="right"><strong>Police department:</strong></td>
      <td>{{dc.data.rpnames}}</td>
    </tr>
  </table>
</div>

contract.js

(function() {
	'use strict';

	angular
		.module('hawk.controllers')
		.controller('ContractController', ContractController);

	ContractController.$inject = ['$scope', 'Websocket'];

	function ContractController ($scope, Websocket) {
		var vm = this;

		vm.data = {};

		init();
		
		function getContracts (id) {
			console.log('getContracts-id', id);
			Websocket.getContracts({ id: id }).then(function(data) {
				console.log('getContracts-data', data);
				vm.data = data.data;
				console.log('getContracts-vm.data', vm.data);
			});
		}

		function getAddress (id) {
			Websocket.getAddress({ id: id }).then(function(data) {
				console.log('getAddress', data);
				vm.address = data.data;
			});
		}

		function init () {
			$scope.$watch('object.id', function(newValue, oldValue) {
				console.log('cc', newValue, oldValue, $scope.object.id);
				getContracts($scope.object.id);
			});
		}
	}
})();

Answer 1

you have to access your variables with the "vm." inside your html -> "{{vm.data}}" etc.

//EDIT: If you want to access them without the "vm" you have to put your variables into the "$scope" in your controller.