Langkah pertama tulis terlebih dahulu kerangka dasar Html-nya dimana kita me-load file angularjs dan sebuah file javascript yang bernama aplikasi.js yang nanti akan memuat fungsi controller. Jangan lupa tambahkan ng-app pada tag body
Selanjutnya untuk variabel pada controller yang akan diakses oleh Html tadi kita buat menggunakan JSON dengan cara harcode saja, alias tulis langsung di controller. Simak kodenya di bawah ini, kode ini ditulis pada file aplikasi.js
Dari kode di atas perhatikan nama fungsi-nya karena hal ini sangat penting berhubungan dengan scope data yang akan diakses pada Html.
Kembali pada Html. Di dalam tag body tambahkan sebuah blok div dimana di dalamnya akan memunculkan data yang diambil dari controller.
Blok di atas memiliki attribut ng-controller yang bernilai BukuController (sama dengan nama fungsi pada aplikasi.js). Artinya blok ini memiliki scope BukuController sehingga bisa mengakses variabel yang ada di dalamnya. Kemudian ng-repeat digunakan sebagai perulangan untuk mendapatkan isi array dari variabel pada controller yaitu bukus, yang sudah terbiasa dengan JSP+JSTL atau view engine lainnya pasti tidak asing dengan bentuk seperti itu.
Adapun kode lengkap Html setelah ditambahkan blok di atas menjadi seperti ini
Ketika di buka pada browser maka akan ditampilkan data-data yang ada pada controller
Di awal saya sudah mengatakan bahwa suatu blok html hanya bisa mengakses variabel yang terdapat pada controller yang merupakan scope-nya. Untuk membuktikannya silahkan copas blok div yang berisi perulangan menampilkan data, taruh di bawah blok sebelumnya dan pada bagian ng-controller ubah nilainya menjadi kosong. Ketika dibuka pada browser maka tidak akan tertampil apapun, kosong belaka.
Sumber: http://agung-setiawan.com/angularjs-mengambil-data-dari-controller