Q:

Angularjs scope variable with dot displays undefined within ng-repeat

I have a an angularjs form  am trying to submit.  The scope variables has each form ng-model variables with dot for example ng-model="post.title", ng-model="post.pid". 
The problem that am having is that post.pid and post.title keeps on alerting values undefined whenever the submit button is clicked..
I have combed stackoverflow for solution and I found this two links 
AngularJS $scope form attribute is undefined after ng-submit
$scope with dot (.)  not initializing values to input fields in angular
and their answers was that I have to first initialized the $scope.post so I have implemented it as follows based on solutions the both links provided. 
$scope.post = {}; 
  $scope.submitButton = function(){
alert($scope.post.pid);
alert($scope.post.title);
  }

Yet it keeps on alerting Undefined each time the submit button is clicked. 
Below is the entire code
<! DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save' value='Save' ng-click="submitButton()">
</form>
</div>

<script>

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http, $parse) {

  $scope.posts = [
    {
      "pid" : "1",
      "title" : "title1"
    },
    {
      "pid" : "2",
      "title" : "title2"
    },
    {
      "pid" : "3",
      "title" : "title3"
    },
  ]

$scope.post = {}; 

  $scope.submitButton = function(){

alert($scope.post.pid);
alert($scope.post.title);
  }

});
</script>

</body>
</html>

A:

Since ng-repeat creates a child scope for each item, it is not visible to the parent scope. 
Pass the post object as an argument to the submit function:
<div ng-repeat="post in posts">
  <form>
    post Id<br>
    <input type='text' ng-model="post.pid" >
    <br> post Title<br>
    <input type='text' ng-model="post.title" name="title">
    <br>
    <input type='button' id='but_save{{$index}}' value='Save'
           ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶u̶b̶m̶i̶t̶B̶u̶t̶t̶o̶n̶(̶)̶"̶
           ng-click="submitButton(post)" />
  </form>
</div>

Use that argument in the function:
$scope.submitButton = function(post){
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶p̶i̶d̶)̶;̶
    alert(post.pid);
    ̶a̶l̶e̶r̶t̶(̶$̶s̶c̶o̶p̶e̶.̶p̶o̶s̶t̶.̶t̶i̶t̶l̶e̶)̶;̶
    alert(post.title);
}

