I started angularjs http request and I got data successfully as following but when I tried to make first item expanded according bootstrap class "collapse in" instead of "collapse" I didn't find solution.

Angularjs

    var app = angular.module('myApp', []);
    app.controller('myCtrl2', function ($scope, $http) {
        $http.get('../C_Angular.asmx/ShowArticle')
        .then(function (response) {
            $scope.Articles = response.data;
        });
    });

HTML

    <div class="panel-group"  data-ng-repeat="Art in Articles" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" data-ng-href="{{Atr.Art_ID}}">
                        {{Art.Art_Title}}
                    </a>
                </h4>
            </div>
            <div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse"> <%-- my prolblem here is
 how to put a class "panel-collapse collapse in" to the first item in the list
 instead of "panel-collapse collapse" --%>

                <img data-ng-src="{{Art.Art_Pic}}" style="margin: 20px; border: 4px solid #FFFFFF;
                width: 140px; height: 100px; float: left;" />
                <div class="panel-body" style="padding: 5px; margin: 5px; text-align: right; background-image: url('../App_Pic/bg03.jpg');">
                        {{Art.Art_Body}}
                </div>
                <button type="button" class="btn btn-primary btn-sm " style="margin-bottom: 10px">Read More ...</button>
            </div>
        </div>
    </div>

Would you help me please to find out how to add "in" class in the first item of angularjs list?

The answer you accepted is bad practice, and you might start getting this error in you app: https://docs.angularjs.org/error/$rootScope/infdig don't bind functions to the view when you don't have to.

You can do it simply with ngClass directive (Using the $first indicator that is TRUE for the first element):

<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="{in: $first}">

The same can also be done using the $index indicator:

<div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="{in: $index == 0}">

You might also want to use one-time binding the ensure that angular stop tracking the the in class after the element is bound to the view, so it won't re-add it on each digest cycle (note the :: in the ngClass expression):

    <div data-ng-id="{{Atr.Art_ID}}" class="panel-collapse collapse" ng-class="::{in: $first}">

Now - You can always use the native uib-collapse for angularjs - Here is an example:

angular.module('app', ['ngAnimate','ui.bootstrap']).controller('ctrl', function ($scope) {

  $scope.Articles = [
    {id: 1, title: 'Interesting article #1', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
    {id: 2, title: 'Interesting article #2', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
    {id: 3, title: 'Interesting article #3', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}];

});

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div ng-app="app" ng-controller="ctrl">
  <div class="panel-group"  data-ng-repeat="Art in Articles" ng-init="Art.isCollapsed = !$first">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-ng-href="{{Atr.id}}" ng-click="Art.isCollapsed = !Art.isCollapsed">{{Art.title}}</a>
        </h4>
      </div>
      <div data-ng-id="{{Atr.id}}" class="panel-collapse collapse" uib-collapse="Art.isCollapsed">
        <div class="panel-body">{{Art.body}}</div>
        <button type="button" class="btn btn-primary btn-sm" >Read More ...</button>
      </div>
    </div>
  </div>
</div>

Here i'm creating the panels similar to how you did, but in the ngRepeat loop I added ng-init="Art.isCollapsed = !$first" which initiale the first article to be visible, while the rest are not. Next, instead of using the "regular" bootstrap attributes, I just use the uibCollapse directive: uib-collapse="Art.isCollapsed" which handle everything for you.

more